skills.rest
Kin3Xc
Kin3XcCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Transform vague UI requirements into token-based frontend code for React, Vue, Svelte, and Next.js.

Updated Jan 15, 2026
Search Tags:#templates#accessibility#TypeScript#Tailwind#production-ready#design-tokens#frontend-design
One-click install
npx skills add https://github.com/Kin3Xc/promoly --skill frontend-design-kin3xc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Kin3Xc/promoly/tree/main/skills/frontend-design
Command: npx skills add https://github.com/Kin3Xc/promoly --skill frontend-design-kin3xc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill translates vague UI design requirements into production-ready frontend code by enforcing a tokens-first workflow and providing ready-to-use CSS/TypeScript templates that ensure consistency across frameworks.

Core Features & Use Cases

  • Token-first design system: semantic tokens for colors, typography, spacing, radii, and elevations to guarantee design consistency.
  • Production-ready samples: CSS tokens (tokens.css), TS components (design-tokens.ts, sample-components.tsx), and templates that work with React, Vue, Svelte, Next.js, Nuxt, and other stacks.
  • Accessibility as a built-in constraint: WCAG-based color contrast guidance, keyboard navigation, ARIA-ready components, and accessible patterns.
  • Framework-agnostic templates: ready-made patterns that can be adapted to multiple frontend ecosystems, speeding up UI development and hand-off.
  • Quick-start guidance: a clear path to generate tokens, implement components, assemble pages, and validate results across devices.

Quick Start

Read SKILL.md to understand the tokens workflow and design principles. Use the provided examples (examples/css/tokens.css, examples/typescript/design-tokens.ts, and examples/typescript/sample-components.tsx) to generate components and pages, then compose pages from components and verify results across breakpoints.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I turn UI specs into production-ready frontend code with a design token system?▼

Generate framework-agnostic frontend templates by defining semantic tokens for colors, typography, and spacing in CSS variables. These templates adapt to React, Vue, Svelte, and Next.js ecosystems, providing ready-to-use TypeScript components that speed up UI development and hand-off.

How does a tokens-first workflow handle accessibility in frontend design?▼

A tokens-first workflow handles accessibility by enforcing WCAG-based color contrast guidance, keyboard navigation, and ARIA-ready patterns as built-in constraints. This ensures generated frontend templates meet accessibility standards during the design-to-code translation.

Can I use these frontend design templates with Svelte and Nuxt?▼

Yes, the production-ready frontend templates are framework-agnostic and support Svelte, Nuxt, React, Vue, and Next.js. They provide ready-made patterns using CSS tokens and TypeScript typings that adapt directly to multiple frontend ecosystems.

What's the best way to structure design tokens for a React component library?▼

Structure design tokens using semantic naming for colors, typography, spacing, radii, and elevations defined in CSS variables and TypeScript files. This approach guarantees design consistency across React components and other framework implementations.

Why does my frontend design lack consistency across different web frameworks?▼

Frontend design lacks consistency without a centralized token system. Implementing semantic design tokens via CSS variables and TypeScript typings enforces a single source of truth for spacing and colors across React, Vue, Svelte, and Next.js environments.

Related Skills

Explore More Design & Creative Skills→
aroidoaroido

design-tokens

Create and manage design token systems for consistent UI development.

Official
Intermediate
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced
aemdemosaemdemos

Get General Styling — Design System Extraction Skill

Extract site-wide styling and design tokens from a live website.

Official
Advanced