skills.rest
samcarrington
samcarringtonCOMMUNITY
Explore all skills by this author →
Website𝕏@gwawr_GitHub

frontend-design

Create production-grade frontend interfaces with design tokens and accessibility guidelines.

Updated Apr 28, 2025
Search Tags:#accessibility#components#tokens#aesthetics#design-system#frontend-design#UI-design
One-click install
npx skills add https://github.com/samcarrington/lovable-security-checklist --skill frontend-design-samcarrington
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/samcarrington/lovable-security-checklist/tree/main/.opencode/skill/skills/frontend-design
Command: npx skills add https://github.com/samcarrington/lovable-security-checklist --skill frontend-design-samcarrington

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams create distinctive, production-grade frontend interfaces with a clear design direction, cohesive tokens, and accessible components, avoiding generic AI aesthetics.

Core Features & Use Cases

  • Distinctive design direction: Establish a bold or refined aesthetic and translate it into working code and tokens.
  • Production-grade implementation: Generate robust, accessible components ready for production with coherent typography, color, spacing, and tokens.
  • Use Case: When building dashboards, marketing sites, or apps that require a unique visual identity and solid UX.

Quick Start

Use the frontend-design skill to generate a production-grade React component with a bold, distinctive aesthetic for a dashboard card, including design tokens and accessibility notes.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build production-grade frontend UI that avoids generic AI aesthetics?▼

You can build distinctive frontend UI by enforcing a design system with explicit tokens, accessibility guidelines, and a modular component architecture, ensuring a unique visual identity rather than generic AI aesthetics.

How do I generate accessible React components with a cohesive design system?▼

Accessible React components with a cohesive design system are generated by applying explicit tokens for typography, color, and spacing, ensuring robust production-grade implementation with built-in accessibility notes and modular architecture.

Can I use this design system approach for both marketing sites and admin dashboards?▼

Yes, this design system approach works for marketing sites, admin dashboards, and web applications by generating distinctive, production-grade interfaces with coherent tokens and accessible components across varied UI contexts.

What are design tokens and how do they help create a distinctive visual identity?▼

Design tokens are explicit variables for typography, color, and spacing that enforce a cohesive design system, translating a bold aesthetic direction into robust code and ensuring a distinctive visual identity.

What's the best way to establish a bold aesthetic direction for web components?▼

Establishing a bold aesthetic direction for web components is best achieved by defining a cohesive design system with explicit tokens and translating that visual identity into robust, production-grade, accessible code.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
ils15ils15
10

frontend-analyzer

Extract typography, colors, layout, spacing, and design tokens from React/Next.js code.

Community
Basic
Ben1821Ben1821

design-system

Generate design tokens and component specifications from JSON configurations.

Community
Intermediate