Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
OpenClaw+21 moreClaude CodeCursorCodex CLIMuseOpenClaw
Manus
Grok
Grok Bot+18 agentsInterface Craft Router
Eight-tier UI routing that puts accessibility and stable rendering before style, turning rough requests into consistent, implementable design decisions.
Free
Interface Craft Router
Example session with this skill installed
We're building Ledger, a fintech SaaS checkout flow in Next.js with Tailwind. The design feels off — colors look flat, the mobile layout jumps when payment options load, and our accessibility review flagged low-contrast gray text and icon-only buttons with no labels. Can you review the checkout page, fix the contrast and focus issues, pick a visual direction that reads as trustworthy and calm for finance users, and make sure every interactive element has proper loading, error, and disabled states? Give me a prioritized fix list with concrete code suggestions for the worst offenders.
- Read your context and instructions
- Compiled the interface craft router
- Generated the UI component
Summary
Audited the Ledger checkout flow against the eight-tier interface hierarchy. Two accessibility blockers and one layout-stability risk fixed; visual direction locked to a quiet fintech dialect (deep slate + one trust-blue accent).
| Metric | Before | After |
|---|---|---|
| Contrast failures (muted gray body text) | 4 | 0 |
| Icon-only buttons without accessible names | 3 | 0 |
| Touch targets under 44x44 CSS px | 6 | 0 |
| CLS when payment options load | 0.21 | 0.02 (space reserved with skeletons) |
| Delete-confirm dialog focus trap | Missing | Implemented |
Validation errors now sit next to the affected field, submission is disabled during pending payment, and step transitions animate only transform/opacity with a reduced-motion fallback.
Next steps
- Apply the full state matrix (default/hover/focus/active/disabled/loading/empty/error) to the order-summary card
- Add a table fallback for the order-total breakdown so values stay checkable
- Persist this brief to design/pages/checkout.md so later pages inherit the same dialect
interface-craft-router.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.
About this skill
The problem
Interfaces often break under real-world conditions, failing accessibility standards or jumping during layout shifts. Developers struggle to balance aesthetic trends with stable, performant code that actually works for the end user.
What it does
- Evaluates UI requests against an eight-tier priority system, putting accessibility and stability before visual style.
- Generates semantic, accessible code for web and mobile surfaces including React, Next.js, SwiftUI, and Tailwind CSS.
- Ensures interactive elements handle all states including hover, focus, loading, error, and empty data.
- Architects responsive layouts that survive variable viewports without unintended horizontal scrolling or layout shifts.
- Applies specific visual dialects for healthcare, finance, commerce, and dev tools to match industry expectations.
Frameworks & tools
React, Next.js, Vue, Svelte, SwiftUI, Flutter, Jetpack Compose, Tailwind CSS, and shadcn/ui.
Why this beats prompting it yourself
Generic prompts often produce "happy path" code that ignores focus states, touch targets, and ARIA labels. This skill enforces a strict pre-delivery audit and routing logic that guarantees production-ready UI components by default.
Use cases
- Building accessible SaaS dashboards with complex data visualization and filtering.
- Creating resilient commerce checkout flows that handle async states and errors.
- Refactoring legacy UI components to meet modern WCAG contrast and focus standards.
- Designing internal admin panels optimized for high-density data and keyboard navigation.
Known limitations
Requires explicit runtime definitions for specific component library integrations. Does not generate custom icon assets or brand logos from scratch.
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
2 installs
Downloaded by developers to date
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 5 days ago
- Free to download with an account