skills.rest
Ssrrb
SsrrbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generates production-grade frontend interfaces with distinctive typography, color, layout, and motion guidelines.

Updated Mar 24, 2026
Search Tags:#typography#accessibility#frontend#css#color palette#web design#ui design
One-click install
npx skills add https://github.com/Ssrrb/cerramos-codebase --skill frontend-design-ssrrb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Ssrrb/cerramos-codebase/tree/main/.codex/skills/frontend-design
Command: npx skills add https://github.com/Ssrrb/cerramos-codebase --skill frontend-design-ssrrb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated interfaces often look generic and templated, using overused fonts, default color palettes, and repetitive card layouts. This Skill guides the creation of distinctive, production-grade web interfaces that avoid recognizable AI design patterns. ## Core Features & Use Cases - Design Direction Enforcement: Commits to a bold aesthetic direction with intentional typography, OKLCH color palettes, and asymmetric layouts instead of defaulting to generic patterns. - Reference Library: Provides in-depth guidance on typography, color and contrast, spatial design, motion, interaction, responsive design, and UX writing through dedicated reference documents. - Context Gathering Protocol: Requires confirmed design context (audience, use cases, brand tone) before producing any design work. - Use Case: When asked to build a landing page or dashboard, the Skill produces polished HTML/CSS with fluid type scales, tinted neutrals, staggered entrance animations, and accessible focus states rather than a generic card grid. ## Quick Start Ask the AI to build a pricing page for your product using the frontend-design skill with a bold editorial aesthetic.

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 web designs look less generic?▼

Commit to a bold aesthetic direction with distinctive font pairings, tinted neutral palettes in OKLCH, and asymmetric layouts. Avoid overused fonts like Inter and Roboto, gradient text, and identical card grids, which are common fingerprints of AI output.

What fonts should I use instead of Inter or Roboto?▼

Use distinctive alternatives like Instrument Sans, Plus Jakarta Sans, Outfit, Onest, or Figtree for body text, and Fraunces or Newsreader for editorial headlines. Pair fonts with contrast on multiple axes such as serif with sans or geometric with humanist.

Does this skill work with any CSS framework?▼

The guidelines are framework-agnostic and focus on modern CSS features like OKLCH colors, clamp() fluid sizing, container queries, and grid-template-rows animations. They apply whether you use vanilla CSS, Tailwind, or component libraries.

Why should I use OKLCH instead of HSL for colors?▼

OKLCH is perceptually uniform, meaning equal lightness steps look equal across hues, unlike HSL where 50% lightness varies visually by color. It also makes building consistent light and dark theme palettes more predictable.

What information is required before generating a design?▼

The skill requires confirmed design context: target audience, use cases, and brand personality or tone. This context cannot be inferred from the codebase and must come from project instructions, an .impeccable.md file, or the teach-impeccable skill.

How should animations be handled for accessibility?▼

Animate only transform and opacity, keep UI feedback under 500ms, and use exponential ease-out curves. Always provide alternatives via the prefers-reduced-motion media query, replacing spatial movement with crossfades for users with vestibular disorders.

Related Skills

Explore More Design & Creative Skills→
deadhearth01deadhearth01

frontend-design

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

Community
Advanced
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
wpankwpank
11

design-system-creation

Create design systems with aesthetic foundations, token architectures, and CVA components.

Community
Advanced