skills.rest
juanchosierrar
juanchosierrarCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Translate vague UI requirements into frontend code with a tokens-first design system.

Updated Aug 27, 2026
Search Tags:#typescript#accessibility#frontend#ui-design#design-system#design-token
One-click install
npx skills add https://github.com/juanchosierrar/GS_PQRS_INFRA_PEREIRA --skill frontend-design-juanchosierrar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/juanchosierrar/GS_PQRS_INFRA_PEREIRA/tree/main/Skills/frontend-design
Command: npx skills add https://github.com/juanchosierrar/GS_PQRS_INFRA_PEREIRA --skill frontend-design-juanchosierrar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Transform vague UI style requirements into executable, production-grade frontend code using a tokens-first design system, ensuring consistency, accessibility, and maintainability.

Core Features & Use Cases

  • Tokens-first methodology (colors, typography, spacing, radius, shadows, motion) to generate a cohesive design system.
  • Production-ready components and patterns (React/TypeScript examples, accessibility, state coverage).
  • Theme management, design-to-code workflow, and templates that speed up delivery for dashboards, landing pages, admin panels, and component libraries.
  • Real-world usage: build dashboards, admin panels, marketing sites with consistent design language.

Quick Start

To get started, read SKILL.md, generate tokens, implement components, and assemble pages following the documented workflow.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I translate UI style requirements into production-ready frontend code using a design token system?▼

To translate UI style requirements into frontend code with design tokens, follow a tokens-first workflow that generates a cohesive system for colors, typography, spacing, radii, shadows, and motion, outputting maintainable React, Vue, or Svelte components.

What is a tokens-first methodology for building accessible UI components?▼

A tokens-first methodology for accessible UI components applies a centralized design system for colors, typography, and spacing to ensure consistency and accessibility compliance across modern frontend stacks like React, Vue, and Svelte.

How do I generate a design system for dashboards and admin panels in TypeScript?▼

Generate a design system for dashboards and admin panels in TypeScript by defining comprehensive design tokens for colors, typography, spacing, radii, shadows, and motion, then assembling production-ready components using a guided implementation workflow.

Can I use this token-driven frontend design approach with Vue and Svelte?▼

Yes, this token-driven frontend design approach works with Vue and Svelte. It generates production-ready components and patterns across modern stacks while maintaining theme management, accessibility, and a consistent design language.

What is the best way to scale a consistent design language across multiple web applications?▼

The best way to scale a consistent design language across web applications is using a tokens-first methodology that defines global styles as tokens, enabling theme management and reusable component libraries for marketing sites and dashboards.

Why does my frontend design system lack consistency and maintainability across components?▼

Frontend design systems lack consistency and maintainability when they bypass a tokens-first approach. Implementing a comprehensive token system for typography, spacing, and colors ensures production-ready components and cohesive state coverage.

Related Skills

Explore More Design & Creative Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
DicklesworthstoneDicklesworthstone
70

wrangler

Deploy and manage Cloudflare Workers, Pages, and storage via wrangler CLI.

Community
Intermediate
fgarofalo56fgarofalo56
6

frontend-testing

Run unit, component, E2E, visual regression, and accessibility tests for React applications.

Community
Advanced
mymx2mymx2
4

unocss

Configure UnoCSS atomic CSS engine with presets and custom rules.

Community
Advanced