skills.rest
nidhalboumaiza-0
nidhalboumaiza-0COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Convert UI style requirements into frontend code with a tokens-first design system.

Updated Dec 24, 2025
Search Tags:#accessibility#tailwind#type-safe#design-system#design-tokens#frontend-design#tokens-first
One-click install
npx skills add https://github.com/nidhalboumaiza-0/PFA_2026_E-Sante --skill frontend-design-nidhalboumaiza-0
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/nidhalboumaiza-0/PFA_2026_E-Sante/tree/main/admin-e-sante/skills/frontend-design
Command: npx skills add https://github.com/nidhalboumaiza-0/PFA_2026_E-Sante --skill frontend-design-nidhalboumaiza-0

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill converts vague UI style requests into cohesive, production-ready frontend code by enforcing a tokens-first design system, ensuring consistency, accessibility, and maintainability.

Core Features & Use Cases

  • Tokens-first design: semantic colors, typography, spacing, radius, shadows, and motion that power all components.
  • Production-ready templates: ready-to-copy CSS, TypeScript components, and templates for rapid delivery.
  • Accessibility and reliability: built-in keyboard navigation, ARIA attributes, and WCAG-aligned contrast.
  • Framework-agnostic applicability: supports React, Vue, Svelte, Next.js, Nuxt, and more; ideal for dashboards, landing pages, admin panels, and component libraries.

Quick Start

Use the skill to generate tokens, components, and pages that adhere to the token system and design direction.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I convert vague UI style requirements into production-ready frontend code?▼

To convert vague UI style requirements into production-ready frontend code, you can use a tokens-first design system that enforces semantic colors, typography, and spacing to generate cohesive and maintainable components.

What is a tokens-first design system and how does it work for frontend development?▼

A tokens-first design system uses semantic tokens for colors, typography, spacing, radius, shadows, and motion to power all UI components, ensuring consistency and maintainability across web applications and component libraries.

Can I use this frontend design approach with React, Vue, Svelte, Next.js, or Nuxt?▼

Yes, this frontend design approach is framework-agnostic and supports React, Vue, Svelte, Next.js, and Nuxt, allowing you to build accessible websites, web apps, dashboards, admin panels, and component libraries.

Does this frontend design system generate accessible components with WCAG-aligned contrast?▼

Yes, this design system generates accessible components with built-in keyboard navigation, ARIA attributes, and WCAG-aligned contrast to ensure reliability and compliance for users with disabilities.

What is the best way to generate TypeScript components and templates for rapid delivery?▼

The best way to generate TypeScript components and templates for rapid delivery is by applying a tokens-first design system that produces ready-to-copy CSS and production-grade code adhering to your design direction.

Why does my UI design lack consistency and maintainability across different components?▼

Your UI design lacks consistency and maintainability because it does not enforce a tokens-first design system with semantic tokens, which is required to power all components cohesively across your application.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
TIAN0517TIAN0517

frontend-design

Transform UI design requirements into TypeScript frontend code with CSS variable tokens.

Community
Advanced
erikhazzarderikhazzard
1

design__building-frontend

Design frontend architectures with BEM, design tokens, and accessible markup.

Community
Advanced
sernafernandosernafernando
1

pricing-app-design

Implement token-driven CSS with CSS Modules for themed UI components.

Community
Intermediate