skills.rest
iuliandita
iulianditaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Build and critique responsive frontend interfaces with WCAG-compliant, mobile-first markup.

2|Updated Apr 6, 2026
Search Tags:#ui#frontend#design review#responsive#tailwind#ux
One-click install
npx skills add https://github.com/iuliandita/skills --skill frontend-design-iuliandita
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/iuliandita/skills/tree/main/skills/frontend-design
Command: npx skills add https://github.com/iuliandita/skills --skill frontend-design-iuliandita

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the problem of generic, AI-generated UI designs that lack visual taste, accessibility, and technical rigor. It enforces a high-standard, opinionated approach to frontend development that rejects common AI design patterns.

Core Features & Use Cases

  • Build Mode: Scaffold responsive, mobile-first interfaces using modern stacks like Astro, SvelteKit, or Tailwind v4, ensuring dark and light themes are designed as first-class citizens.
  • Critique Mode: Audit existing UIs, screenshots, or code for accessibility, visual hierarchy, and anti-patterns, providing actionable P0-P3 tickets.
  • Stack-Pick: Receive expert guidance on selecting the right frontend framework based on project constraints and performance requirements.

Quick Start

Use the frontend-design skill to build a mobile-first dashboard interface using SvelteKit and Tailwind CSS.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build mobile-first responsive UIs that avoid generic AI design patterns?▼

Build mobile-first responsive UIs by enforcing strict design standards, high visual taste, and technical rigor to reject common generic AI design patterns. This approach scaffolds interfaces using modern frontend stacks like Astro, SvelteKit, or Tailwind v4.

How do I audit existing frontend code for accessibility and visual hierarchy issues?▼

Audit existing frontend code by using a critique mode that evaluates screenshots or code for WCAG compliance, visual hierarchy, and anti-patterns. This process identifies specific issues and generates actionable P0-P3 tickets for resolution.

Does this approach support dark and light theme architecture for web applications?▼

Dark and light theme architecture is fully supported for web applications. It treats dark and light themes as first-class citizens during the responsive design process, ensuring proper contrast and visual consistency across the interface.

What is the best way to select a frontend framework for landing page creation?▼

The best way to select a frontend framework for landing page creation is to evaluate project constraints and performance requirements. Expert guidance compares modern stacks like Astro, SvelteKit, or Tailwind v4 to match your specific needs.

Can I use Tailwind CSS to build WCAG-compliant interactive web elements?▼

You can use Tailwind CSS to build WCAG-compliant interactive web elements. The process enforces strict accessibility requirements and mobile-first markup, ensuring interactive components meet modern technical standards.

Why does my generated UI lack visual taste and technical rigor?▼

Generated UI lacks visual taste because it often relies on generic, AI-generated patterns without strict design standards. Applying an opinionated approach to frontend development enforces high visual quality, accessibility, and technical rigor.

Related Skills

Explore More Design & Creative Skills→
SynkraAISynkraAI
3.1k

aios-architect

Design system architectures with technology stack selection and API design.

Official
Advanced
joncoroneljoncoronel
1

audit

Audit codebases and UI components for accessibility, performance, theming, responsive design, and anti-patterns.

Community
Intermediate
coco-researchcoco-research
264

tailwind-patterns

Creates Tailwind CSS v4 interfaces with semantic tokens and container queries.

Community
Intermediate
benshapyrobenshapyro
9

frontend-design

Plan distinctive UI designs with typography, color, motion, and layout decisions.

Community
Intermediate