skills.rest
idy-00
idy-00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-code

Generates token-driven, accessible component code for multiple UI frameworks.

Updated Jul 20, 2026
Search Tags:#accessibility#react#design tokens#component generation#tailwind#dark mode#multi-framework
One-click install
npx skills add https://github.com/idy-00/paytrack --skill design-code-idy-00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-code
Source: https://github.com/idy-00/paytrack/tree/main/backend/.agents/skills/design-code
Command: npx skills add https://github.com/idy-00/paytrack --skill design-code-idy-00

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Writing UI components by hand often leads to hardcoded values, missing accessibility attributes, inconsistent states, and framework-specific rework. This Skill generates complete component code that follows a shared design-token system and accessibility rules across many frameworks. ## Core Features & Use Cases - Multi-framework code generation: Produces components for React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, and CSS-in-JS via an adapter system. - Token and accessibility enforcement: Resolves every color, size, radius, and font to design tokens, wires ARIA roles and keyboard models, and covers all eight interaction states including dark mode and reduced motion. - Verification gates: Runs lint and audit scripts to catch hardcoded values, unresolved theme tokens, contrast failures, and incomplete output before delivery. - Use Case: Ask for a settings screen in Next.js and receive complete files using the project's shared token theme, a reusable Modal primitive with focus trap, and verified state coverage. ## Quick Start Generate a production-ready accessible Button component in React with Tailwind using our design tokens.

Frequently Asked Questions about design-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a component for a specific framework like Vue or Flutter?▼

State the target framework and styling method in your request. The Skill loads the matching adapter from its frameworks directory, or authors a new adapter on the fly using the adapter protocol checklist if no file exists for that target.

What frameworks does design-code support for UI component generation?▼

It supports React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, and CSS-in-JS. Full references exist for React, Next.js, and SwiftUI, with concise adapters for the rest.

Does the generated code handle accessibility and ARIA attributes?▼

Yes, every interactive element gets the correct role and ARIA pattern from the accessibility references, plus keyboard models, focus management, and minimum 24px targets. Contrast is verified with a script for any new color pair.

Why does the Skill reject hardcoded colors or pixel values in output?▼

Hardcoded values break theming and dark mode, so every color, size, radius, shadow, duration, and font must trace to a design token. Lint scripts flag raw hex, pixel, and millisecond values plus raw Tailwind palette utilities before delivery.

Can I use the generated components with an existing design system theme?▼

Yes, the Skill consumes the project's single shared token theme at the root CSS-variable layer and never defines per-page palettes. The same semantic tokens drive every surface so the product stays themeable from one place.

Related Skills

Explore More Design & Creative Skills→
KyaniteLabsKyaniteLabs
3

design-system-interview

Interview nine design dimensions and generate a DESIGN-SYSTEM.md specification.

Official
Advanced
hpsgdhpsgd

write-pipeline

Generate CI/CD pipeline configurations for GitHub Actions, GitLab CI, and Azure Pipelines.

Official
Advanced
izzoaizzoa
22

ss-verify

Inspect rendered browser screenshots for visual defects in layout, typography, contrast, and spacing.

Community
Advanced
usebonderyusebondery
15

mantine-custom-components

Build Mantine custom components with factory, Styles API, and CSS variables.

Official
Advanced