Frontend Design
seb1n/awesome-ai-agent-skillsDesign and build production-ready frontend interfaces with design systems, responsive layouts, accessible components, and dark mode support. Use when the user requests frontend design or provides relevant inputs for this workflow.
At a glance
This skill is for Design.
git clone --depth 1 https://github.com/seb1n/awesome-ai-agent-skills
cp -r awesome-ai-agent-skills/design-and-ui-ux/frontend-design ~/.claude/skills/frontend-design
Setup, runtime and requirements describe seb1n/awesome-ai-agent-skills, the repo this skill ships in.
Also in seb1n/awesome-ai-agent-skills
View the repoAudit web interfaces against WCAG 2.1 AA/AAA standards, identify violations, and produce actionable remediation reports with code fixes. Use...
Design reproducible evaluations for AI agents with representative task sets, explicit rubrics, appropriate graders, baselines, regression ga...
Design privacy-aware observability for AI agents using traces, spans, structured events, metrics, cost attribution, dashboards, alerts, and...
Plan, execute, document, and retest authorized security assessments of AI agents and multi-agent workflows using safe adversarial cases, syn...
Generate comprehensive marketing analytics reports by collecting KPIs, analyzing trends, and delivering actionable insights with attribution...
Design RESTful APIs with proper resource modeling, HTTP method semantics, status codes, pagination, versioning, and documentation. Use when...
Integrate with external APIs using REST clients, webhook consumers, SDK wrappers, and polling patterns with proper authentication, error han...
Write high-quality, SEO-optimized blog posts in multiple formats including how-to guides, listicles, opinion pieces, and case studies, with...
Create and manage budgets with variance analysis and departmental allocation. Use when the user requests budget planning or provides relevan...
Design structured, engaging chatbot conversations with robust intent handling, slot filling, disambiguation, error recovery, and graceful fa...
Identify at-risk customer accounts by analyzing usage patterns, engagement signals, and support history to generate churn risk scores and in...
Set up a continuous integration and continuous delivery (CI/CD) pipeline for a software project, automating builds, tests, and deployments a...
Other Design skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right,...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...