skills.rest
vadimcomanescu
vadimcomanescuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Create token-driven frontend interfaces for Next.js App Router, React, and vanilla HTML/CSS/JS.

24|8|Updated Jan 14, 2026
Search Tags:#accessibility#react#nextjs#tokens#design-system#frontend-design#ui-starter
One-click install
npx skills add https://github.com/vadimcomanescu/codex-skills --skill frontend-design-vadimcomanescu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/vadimcomanescu/codex-skills/tree/main/skills/.curated/design/frontend-design
Command: npx skills add https://github.com/vadimcomanescu/codex-skills --skill frontend-design-vadimcomanescu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Create distinctive, production-ready frontend interfaces that avoid generic templates and deliver a cohesive aesthetic direction, accessible interactions, and scoped, maintainable design tokens so teams can ship intentional UI quickly and consistently.

Core Features & Use Cases

  • Aesthetic direction & signature move: helps pick a single memorable visual gesture and commit to it across layouts and components.
  • Token-first design system: defines color, type, spacing, radius, depth, and motion tokens for easy retheming and consistent cross-platform styling.
  • Stack-specific starters & guidance: provides Next.js App Router, React component, and vanilla HTML/CSS/JS starters plus implementation patterns and accessibility guardrails.
  • Practical workflow: planning, implementation notes (server vs client for Next.js), accessibility checks, reduced-motion support, and a deliverable-focused Definition of Done.
  • Use case: retheme an existing Next.js app route to improve hierarchy, accessibility, and performance while preserving core components and constraints.

Quick Start

Ask for a focused redesign by naming the user goal, the target file or route, the stack (Next.js/React/vanilla), and any hard constraints like tokens, motion limits, or accessibility requirements.

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 React component library with cohesive design tokens?▼

Build a React component library with cohesive design tokens by defining color, type, spacing, radius, depth, and motion tokens that enable consistent cross-platform styling and easy retheming across all components.

What is the best way to redesign a Next.js App Router route for better accessibility?▼

Redesign a Next.js App Router route for better accessibility by enforcing tokenized theming, preferring server components, respecting prefers-reduced-motion, and applying accessibility guardrails while preserving core components and constraints.

Can I use this frontend design approach for standalone vanilla HTML/CSS/JS projects?▼

Yes, this frontend design approach works for standalone vanilla HTML/CSS/JS projects by providing rethemeable starters, implementation patterns, and token-driven styling that maintain accessibility and cohesive aesthetic direction.

How do design tokens improve frontend retheming and maintainability?▼

Design tokens improve frontend retheming by scoping color, type, spacing, radius, depth, and motion values into a centralized system, allowing teams to update themes consistently across Next.js and React interfaces without breaking individual components.

Does this UI scaffolding approach support prefers-reduced-motion for accessible interactions?▼

Yes, this UI scaffolding approach supports prefers-reduced-motion by enforcing accessibility checks and motion limits, ensuring that distinctive frontend interfaces remain usable for users who require reduced visual motion.

How do I start a focused frontend redesign with specific stack constraints?▼

Start a focused frontend redesign by naming the user goal, target file or route, the stack such as Next.js or vanilla HTML, and any hard constraints like token requirements, motion limits, or accessibility requirements to receive production-grade implementation guidance.

Related Skills

Explore More Design & Creative Skills→
huangzidahuangzida
2

design-taste-frontend

Enforces baseline typography, color, spacing, and motion in React/Next.js projects.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-reduced-motion

Detect CSS animations and transitions lacking prefers-reduced-motion media query coverage.

Community
Intermediate
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
lth0lth0

frontend-design

Generate production-grade HTML/CSS/JS frontend interfaces with cohesive typography, color, and motion.

Community
Advanced