skills.rest
teegin-g
teegin-gCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate cohesive React component sets from a frontend design direction.

Updated Jan 30, 2026
Search Tags:#design#ui#frontend#responsive#aesthetics#design-systems#component-library
One-click install
npx skills add https://github.com/teegin-g/Slopcast --skill frontend-design-teegin-g
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/teegin-g/Slopcast/tree/main/.cursor/skills/frontend-design
Command: npx skills add https://github.com/teegin-g/Slopcast --skill frontend-design-teegin-g

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamlines the creation of production-grade frontend interfaces.

Core Features & Use Cases

  • Production-grade UI implementation: Deliver working, polished frontend components and pages that align with a chosen design direction.
  • Design direction & systems: Establish typography, color, spacing, motion, and accessibility guidelines to ensure consistency across projects.
  • Use Case: Build a marketing landing page or a reusable component library with cohesive visuals and interactions.

Quick Start

Describe a bold frontend design direction and generate a cohesive React component set that matches it.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a production-grade frontend interface with a cohesive design system?▼

To build production-grade frontend interfaces, establish explicit design direction, typography, color systems, responsive layouts, and motion guidelines to ensure visual consistency across components and pages.

What is the best way to create a reusable component library with cohesive visuals?▼

Creating a reusable component library requires establishing cohesive design systems covering typography, color, spacing, and motion guidelines to ensure visual consistency across all generated components and interactions.

Do I need to specify responsive layouts and motion guidelines for frontend UI design?▼

Specifying responsive layouts and motion guidelines is required for frontend UI design to satisfy production-grade standards, ensuring interactions and adaptability are cohesive across the final application interface.

Can I use this approach for both marketing landing pages and web applications?▼

Yes, this approach applies to both marketing landing pages and web applications, streamlining creation of various frontend interfaces including web components, pages, and posters with consistent aesthetics.

How do I establish typography and color systems for a React component set?▼

Establish typography and color systems for a React component set by defining an explicit design direction that aligns visual elements, ensuring cohesive aesthetics and consistent interactions across the frontend implementation.

What are the limitations of generating frontend components without an explicit design direction?▼

Without an explicit design direction, generated frontend components lack cohesive aesthetics, consistent typography, structured color systems, and responsive layout guidelines, resulting in fragmented and unpolished production interfaces.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
012e012e
1

primitives

Export unstyled React UI primitives for building customizable chat interfaces.

Community
Intermediate
wssAchilleswssAchilles
2

frontend-design

Design production-grade frontend interfaces with cohesive aesthetics and accessible layouts.

Community
Basic
gvinokurgvinokur

ui-ux-designer

Generate standalone HTML mockups with React and MUI v7 components.

Community
Intermediate