frontend-design-system
Production-grade UI design with design tokens, layout rules, motion guidance, and accessibility validation.
- Provides structured design token system covering colors, typography, spacing, shadows, and breakpoints for consistent scaling across projects
- Includes layout specification templates for different page types (landing, dashboard, form, blog, e-commerce) with responsive breakpoint rules
- Offers motion guidelines with easing curves, transition durations, and interaction patterns for hover states and page transitions
- Built-in accessibility checklist covering WCAG 2.1 AA compliance, keyboard navigation, screen reader support, and readability standards
- Generates component handoff packages with prop specifications, CSS summaries, and multi-agent validation workflows for design review
Frontend Design System
A skill for production-grade UI design. Supports consistent, scalable frontend development through clear design tokens, layout rules, motion guidelines, and accessibility checks.
When to use this skill
- Production-quality UI needed: Generate high-quality UI from prompts
- Consistent design language: Maintain a unified visual language across screens
- Typography/layout/motion guidance: Systematic design system
Instructions
Step 1: Define Design Tokens
// design-tokens.ts
export const tokens = {
More from supercent-io/skills-template
security-best-practices
Implement security best practices for web applications and infrastructure. Use when securing APIs, preventing common vulnerabilities, or implementing security policies. Handles HTTPS, CORS, XSS, SQL Injection, CSRF, rate limiting, and OWASP Top 10.
14.1Kdata-analysis
Analyze datasets to extract insights, identify patterns, and generate reports. Use when exploring data, creating visualizations, or performing statistical analysis. Handles CSV, JSON, SQL queries, and Python pandas operations.
13.8Kweb-accessibility
Implement web accessibility (a11y) standards following WCAG 2.1 guidelines. Use when building accessible UIs, fixing accessibility issues, or ensuring compliance with disability standards. Handles ARIA attributes, keyboard navigation, screen readers, semantic HTML, and accessibility testing.
12.7Kworkflow-automation
Automate repetitive development tasks and workflows. Use when creating build scripts, automating deployments, or setting up development workflows. Handles npm scripts, Makefile, GitHub Actions workflows, and task automation.
12.6Kcode-review
Conduct thorough, constructive code reviews for quality and security. Use when reviewing pull requests, checking code quality, identifying bugs, or auditing security. Handles best practices, SOLID principles, security vulnerabilities, performance analysis, and testing coverage.
12.5Kdatabase-schema-design
Design and optimize database schemas for SQL and NoSQL databases. Use when creating new databases, designing tables, defining relationships, indexing strategies, or database migrations. Handles PostgreSQL, MySQL, MongoDB, normalization, and performance optimization.
12.2K