skills.rest
yxc023
yxc023COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Align frontend interfaces with design tokens, typography, color, and accessibility constraints.

Updated Apr 22, 2026
Search Tags:#typography#accessibility#tokens#ui-ux#design-systems#frontend-design#component-library
One-click install
npx skills add https://github.com/yxc023/agent-config-studio --skill frontend-design-yxc023
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yxc023/agent-config-studio/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/yxc023/agent-config-studio --skill frontend-design-yxc023

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often reinvent UI from scratch, leading to inconsistent experiences and slower delivery.

Core Features & Use Cases

  • Design-system alignment: Plan and enforce tokens, typography, color, spacing, and components across greenfield builds or refactors.
  • Codebase-aware guidance: Detect existing patterns and existing codebase conventions, adapting recommendations to the project.
  • Use Case: When starting a new page or feature, ensure all UI assets align with the design system before implementation.

Quick Start

Describe your current design system and goal, and I will propose a plan and scaffolds that align with your tokens and patterns.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I align frontend code with an existing design system?▼

Align frontend code with a design system by enforcing design tokens, typography, color, and spacing constraints to ensure consistent user experiences across new builds and refactors.

What is the best way to verify design tokens in a web application?▼

Verify design tokens in a web application by applying layout and accessibility constraints, detecting existing codebase patterns, and outputting planning and verification guidance.

How do I enforce accessibility and typography constraints during a frontend refactor?▼

Enforce accessibility and typography constraints during a frontend refactor by aligning interfaces with existing design systems and applying component library rules to maintain consistency.

Can I use this approach for greenfield frontend builds without an existing component library?▼

Yes, this approach supports greenfield frontend builds by proposing plans and scaffolds that align with your described design tokens and patterns before implementation begins.

How do I plan a new UI feature using design tokens and existing codebase conventions?▼

Plan a new UI feature using design tokens by describing your current design system and goal, which generates scaffolds and guidance adapted to your existing codebase conventions.

Why does my frontend UI look inconsistent across different pages?▼

Frontend UI looks inconsistent across pages when teams reinvent UI from scratch instead of enforcing design tokens, typography, color, and spacing constraints from a shared design system.

Related Skills

Explore More Design & Creative Skills→
makyua-sanmakyua-san

design-consultation

Generate DESIGN.md with typography, color, spacing, and motion tokens.

Community
Advanced
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
alex-voloshin-devalex-voloshin-dev
2

ui-ux-design

Standardize UI/UX design systems and WCAG 2.2 AA accessibility compliance through structured auditing and documentation workflows.

Community
Advanced
Jainam1673Jainam1673

ui-ux-pro-max

Extract UI/UX design patterns and guidelines from a centralized knowledge base.

Community
Advanced