skills.rest
thefear078
thefear078COMMUNITY
Explore all skills by this author →
𝕏@thefear078GitHub

frontend-design

Create distinctive UI designs with deliberate typography, color tokens, and visual critique phases.

15|3|Updated Jul 9, 2026
Search Tags:#typography#frontend#color palette#design tokens#ui design#tailwind#visual critique
One-click install
npx skills add https://github.com/thefear078/cursor-kit-for-ai --skill frontend-design-thefear078
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/thefear078/cursor-kit-for-ai/tree/main/plugins/frontend/skills/frontend-design
Command: npx skills add https://github.com/thefear078/cursor-kit-for-ai --skill frontend-design-thefear078

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces tend to converge on the same generic patterns — cream backgrounds with serif headlines, dark themes with acid-green accents, glassmorphism cards on purple gradients. This Skill forces intentional aesthetic decisions before any code is written, so landing pages, dashboards, and design systems have a recognizable identity instead of looking like unreviewed AI output. ## Core Features & Use Cases - Aesthetic Direction Framework: Choose from seven defined design directions (industrial utilitarian, warm editorial, Swiss minimal, and more) with an explicit blocklist of AI-default combinations to reject. - Token-Based Design System: Define color, typography, and spacing as CSS variables or Tailwind theme extensions, with contrast requirements and a mandatory signature element for brand identity. - Screenshot Critique Workflow: Capture pages at 375px, 768px, and 1280px widths and run squint, swap, and neighbor tests with a structured severity model (Blocker, Major, Minor, Nit). - Use Case: When building a new SaaS landing page, run Phase 1 to commit to a direction and signature element, critique the design brief against the AI-default blocklist, implement with tokenized styles, then screenshot-critique the result against competitor sites before shipping. ## Quick Start Use the frontend-design skill to create a distinctive landing page for my product, starting with an aesthetic direction brief and ending with a screenshot critique.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I make AI-generated UI not look generic?▼

Commit to one explicit aesthetic direction before writing code, define a signature element users can describe in one sentence, and reject known AI-default patterns like cream backgrounds with serif headlines or dark themes with acid-green accents. Finish with a screenshot critique at multiple viewport widths.

How to structure design tokens in CSS or Tailwind?▼

Define tokens as CSS variables or a Tailwind @theme extension covering surfaces, text, brand accents, semantic states, and borders — never hardcode hex values in components. For Tailwind v4 use @theme in CSS; for shadcn/ui override the globals.css variables rather than component internals.

What typography pairing rules should I follow for web design?▼

Pair fonts from different classifications, such as serif with sans or grotesque with mono, never two similar sans families. Use a modular scale with at least five steps, limit body text to two weights, and keep body line length between 55 and 75 characters.

Does this design workflow work with shadcn/ui and Tailwind?▼

Yes, the skill includes stack-specific guidance for Tailwind v4, CSS Modules, styled-components, and shadcn/ui. The key rule is to override design tokens rather than component internals, since unchanged shadcn defaults are a starting point, not a design system.

Why does my UI look fine in code but generic in the browser?▼

Code review cannot catch visual sameness, which is why the skill requires a screenshot critique phase. Capture the page at 375px, 768px, and 1280px, then run the squint test for hierarchy, the swap test for brand identity, and the neighbor test against competitor sites.

What contrast ratios are required for accessible UI text?▼

Body text must meet a contrast ratio of at least 4.5:1 and large text at least 3:1. The skill directs you to verify these values with an accessibility audit before shipping.

Related Skills

Explore More Design & Creative Skills→
deadhearth01deadhearth01

frontend-design

Generate production-grade frontend interfaces with structured frontmatter-driven design processes.

Community
Advanced
selrai-companyselrai-company

web-accessibility

Audit and improve web interfaces for WCAG 2.1 accessibility compliance.

Official
Intermediate
algusaemalgusaem

react-ui-patterns

Codify loading, error, and empty state patterns for React components.

Community
Basic
waqarahmed-designwaqarahmed-design
13

visual-design

Establish and govern brand identity, design tokens, and visual consistency across products.

Community
Advanced