skills.rest
ScarletFish
ScarletFishCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate HTML, CSS, and JavaScript components with WCAG 2.2 AA accessibility.

Updated Jun 8, 2026
Search Tags:#design#ui#accessibility#frontend#css#web-development
One-click install
npx skills add https://github.com/ScarletFish/MyAnimeDock --skill frontend-design-scarletfish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ScarletFish/MyAnimeDock/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/ScarletFish/MyAnimeDock --skill frontend-design-scarletfish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the issue of generic, uninspired AI-generated user interfaces by enforcing a rigorous design-first approach that prioritizes aesthetic intentionality, accessibility, and production-grade code quality.

Core Features & Use Cases

  • Aesthetic Direction: Implements specific design languages ranging from brutalist to refined minimalism, ensuring interfaces are memorable and context-aware.
  • Accessibility & Craft: Automatically audits code against WCAG 2.2 AA standards, ensuring semantic markup, proper contrast, and keyboard operability.
  • Use Case: Use this skill when building a new dashboard or landing page to ensure the layout, typography, and motion design feel cohesive, professional, and distinct from standard template-based outputs.

Quick Start

Use the frontend-design skill to create a brutalist-inspired landing page for a new productivity tool that features a bold typography scale and a bento-grid layout.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate accessible web interfaces that meet WCAG 2.2 AA standards?▼

Accessible web interfaces that meet WCAG 2.2 AA standards are generated by enforcing semantic HTML markup, ensuring proper color contrast, and verifying keyboard operability. This approach automatically audits frontend code during creation to satisfy compliance requirements.

What is the best way to create a high-impact landing page without generic template aesthetics?▼

Creating a high-impact landing page without generic template aesthetics requires applying a design-first approach with specific aesthetic directions like brutalism or refined minimalism. This ensures UI components are memorable, context-aware, and visually distinctive.

How do I build a brutalist-inspired dashboard with modern CSS custom properties?▼

Building a brutalist-inspired dashboard with modern CSS custom properties involves generating production-grade HTML, CSS, and JavaScript components. This process utilizes custom properties for consistent theming and responsive design while maintaining bold typographic scales.

Does this frontend design approach support responsive layouts for bento-grid structures?▼

This frontend design approach fully supports responsive layouts for bento-grid structures by utilizing modern CSS custom properties. It generates production-grade code that ensures cohesive layout scaling across different viewport sizes.

Can I use this method to produce production-grade HTML and CSS for a web application?▼

You can use this method to produce production-grade HTML and CSS for web applications because it outputs high-quality frontend code components. It focuses on unique aesthetic direction and semantic structure suitable for professional deployment.

Why does AI-generated UI often lack distinctive visual impact and how is it fixed?▼

AI-generated UI often lacks distinctive visual impact because it defaults to uninspired, generic templates. This is fixed by enforcing a rigorous design-first approach that prioritizes aesthetic intentionality and accessibility compliance in the frontend code.

Related Skills

Explore More Design & Creative Skills→
vanman2024vanman2024
10

design-system-enforcement

Enforce design-system compliance for Next.js UI components with shadcn/ui and Tailwind v4.

Community
Advanced
benswiftbenswift
26

frontend-web-engineer

Develops accessible, responsive HTML/CSS/JavaScript interfaces with Playwright-based testing.

Community
Intermediate
xobotyixobotyi
19

accessibility

Enforce WCAG 2.2 AA compliance in HTML, CSS, and JavaScript.

Community
Intermediate
xiaoyuge886xiaoyuge886
196

frontend-design

Generate production-ready React or Vue components with custom typography and CSS animations.

Community
Advanced