frontend-design

Guide typography, color, motion, and accessibility for frontend interfaces.

2|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/eserlan/Codex-Cryptica --skill frontend-design-eserlan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/eserlan/Codex-Cryptica/tree/main/.agent/skills/frontend-design
Command: npx skills add https://github.com/eserlan/Codex-Cryptica --skill frontend-design-eserlan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend design fills the gap between generic AI aesthetics and intentional, brand-aligned interfaces, guiding teams to craft visually compelling and cohesive user experiences.

Core Features & Use Cases

  • Establish a bold aesthetic direction and translate it into code, typography, color, and motion.
  • Provide implementation guidelines for reusable components, visual systems, and accessible UI patterns.
  • Use Case: When building a marketing site or dashboard, apply this skill to deliver a cohesive, high-quality UI with unique typography and motion.

Quick Start

Implement a single UI component that embodies the defined aesthetic and accessibility standards.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I design production-grade frontend interfaces that look distinctive instead of generic?

Distinctive, production-grade frontend design requires a structured framework to guide typography, color systems, motion, and accessibility, translating bold aesthetic directions into cohesive, brand-aligned user experiences and reusable components.

What is the best way to establish a design system for reusable UI components?

Establishing a design system for reusable UI components involves defining structured guidance for visual systems, typography, and color, enforcing accessibility-compliant implementation patterns to ensure cohesive and high-quality interfaces across pages and apps.

How do I build accessible dashboards with unique typography and motion?

Building accessible dashboards with unique typography and motion requires applying a clear framework that translates aesthetic direction into code while enforcing accessibility standards and reusable patterns aligned with your design system.

Can I use this framework to prototype a single UI component or does it only work for full pages?

You can use this framework to implement a single UI component that embodies defined aesthetic and accessibility standards, as it is applicable to building components, pages, apps, and full dashboards alike.

How do I translate a bold aesthetic direction into frontend code?

Translating a bold aesthetic direction into frontend code involves using a structured framework to guide the implementation of visual systems, typography, color, and motion, ensuring the final UI is visually compelling and accessible.

Why does my frontend UI look generic and lack brand alignment?

Frontend UI looks generic when it lacks intentional, brand-aligned design, which can be resolved by applying a structured framework to craft visually compelling interfaces with unique typography, cohesive color systems, and motion.