Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsCybrdeck Design
A production-grade design authority that eliminates AI visual slop via strict negative constraints and a 4-pass pipeline.
$8
Cybrdeck Design
Example session with this skill installed
Refactor this hero section. It currently has a generic centered layout and indigo buttons. I want a Swiss Brutalist look with high weight contrast and no indigo.
- Read your context and instructions
- Compiled the cybrdeck design
- Generated the UI component
I have refactored the hero section by discarding the centered template in favor of an asymmetrical 12-column grid. I replaced the generic indigo accents with a high-contrast monochromatic palette and applied a strict Swiss Brutalist typographic scale.
Swiss Brutalist Hero Refactor
import React from 'react';
const Hero = () => {
return (
<section className="grid grid-cols-1 lg:grid-cols-12 gap-8 px-6 py-24 max-w-7xl mx-auto border-b border-black">
<div className="lg:col-span-8 flex flex-col justify-end">
<h1 className="text-7xl lg:text-9xl font-black leading-[0.9] tracking-[-0.04em] uppercase">
Engineered <br /> Precision
</h1>
</div>
<div className="lg:col-span-4 flex flex-col justify-between border-l border-black pl-8">
<p className="text-xl leading-relaxed max-w-[35ch]">
The Cybrdeck Design System eliminates visual slop through
quantifiable constraints and a 4-pass execution pipeline.
</p>
<div className="mt-12">
<button className="w-full lg:w-auto px-8 py-4 bg-black text-white text-sm font-bold hover:bg-neutral-800 transition-colors duration-200">
VIEW SPECIFICATION
</button>
</div>
</div>
</section>
);
};
export default Hero;
CX Delta
| Area | Before | After |
|---|---|---|
| Theme | Generic Indigo | Swiss Brutalist (High Contrast) |
| Typography | Standard Sans | 9xl Black / 1.4 Body Scale |
| Spacing | Centered Auto | Asymmetric 12-column Grid |
| Motion | Default Transition | 200ms Linear Color Shift |
| Copy/Labels | Marketing Fluff | Plain Professional English |
| Regressions | None | Layout Lock Verified |
Next steps
- Review the text-9xl rendering on 375px viewports to ensure zero overflow.
- Confirm the monochromatic brand tokens align with your global CSS variables.
- Apply the 1px border-black logic to the remaining navigation components.
cybrdeck-design.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
The problem
AI-generated UIs often fall into a "statistical average" trap, producing generic centered heroes, indigo accents, and repetitive card grids. Without strict constraints, models default to bloated marketing jargon and uninspired, templated aesthetics that feel "AI-made".
What it does
- Enforces a 6-dimension Negative Constraint architecture to explicitly forbid generic design defaults.
- Executes UI builds through a Decoupled 4-Pass Pipeline, separating typography, spacing, motion, and accessibility into distinct work phases.
- Audits every output against a 21-point Anti-Slop Enforcement Matrix to eliminate fabricated metrics, neon halos, and costume monospace.
- Provides 8 curated visual style archetypes with specific image-generation prompts and material principles for high-end art direction.
- Generates a mandatory CX Delta receipt for every change to track theme, typography, and motion regressions quantitatively.
Frameworks & tools
Framework-agnostic but optimized for Tailwind CSS, React, and modern frontend stacks. Supports WCAG accessibility standards and responsive design at 375px breakpoints.
Why this beats prompting it yourself
Standard prompts like "make it look premium" result in vague, inconsistent UIs because models lack innate taste. This skill replaces subjective adjectives with token-bounded directives and mathematical constraints, ensuring every design decision is defensible, professional, and free from common AI hallucinations.
Use cases
- Redesigning a generic SaaS dashboard into a high-density, professional tool.
- Auditing an existing landing page for accessibility and responsive failures.
- Generating distinct art direction for a brand that avoids "tech-startup" cliches.
- Building complex forms with strict touch ergonomics and state machine logic.
Known limitations
Focused exclusively on frontend UI/UX and art direction. Does not handle backend logic, database architecture, or non-visual work.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 10 days ago
- Passed all security checks, Safe to install