🎨
FrontendPython

Frontend Design

by HezaoHezao

Frontend Design is a Frontend skill for Claude Code, published by HezaoHezao in poirot.

185 stars8 forkson HezaoHezao/poirotAdded 2026/08/11+48% in starsRepository updated 2026/07/28
View source on GitHubDownload repo ZIP
agentagent-memoryagent-skillagent-skillsagentic-aiagentsai-agentai-agentsai-codingmemorymemory-systemmulti-agent
Install in seconds
Install Frontend Design
Copy Frontend Design into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/frontend-design ~/.claude/skills/frontend-design

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/HezaoHezao/poirot.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
poirot/backend/agents/skill/builtin_skills/creative/frontend-design/SKILL.md in HezaoHezao/poirot
Installs to
~/.claude/skills/frontend-design
Collection
One of 37 skills cataloged from this repository
Category
Frontend — 567 skills

What Frontend Design does

Creates distinctive, production-grade frontend interfaces with unique aesthetics, avoiding generic AI-generated designs. Use for crafting memorable, visually striking UIs with meticulous attention to detail.

Frontend Design is cataloged under Frontend on DirSkills. Frontend Design comes from a repository tagged agent, agent-memory, agent-skill, agent-skills and agentic-ai.

Documentation

README

Frontend Design

Overview

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

Output Requirements

MANDATORY: The entry HTML file MUST be named index.html.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Frontend Design

  • What else does HezaoHezao publish alongside Frontend Design?

    Frontend Design is one of 37 skills that DirSkills catalogs from HezaoHezao/poirot, the repository it ships in. Its siblings there include Academic Paper Review, ArXiv Research and Architecture Diagram. Each one is a separate skill with its own page in this directory, installs the same way Frontend Design does, and is maintained by HezaoHezao in that same repository. The rest of the collection is listed on the HezaoHezao/poirot page.

  • How does Frontend Design compare to other Frontend skills?

    Frontend Design ranks #526 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Frontend Design against them. Open each page to compare what they document and how they install.

More from HezaoHezao/poirot

Frontend Design is one of 37 skills cataloged on DirSkills from HezaoHezao/poirot.

See all 37 skills →
🔍
3w ago

Academic Paper Review

Produces structured, peer-review-quality analyses of academic papers, covering methodology assessment, strengths, weaknesses, and actionable recommendations.
Writing
1858
📚
3w ago

ArXiv Research

Enables searching and retrieving academic papers from arXiv using a free REST API. Ideal for researchers needing quick access to papers by keyword, author, or category.
Data
1858
🏗️
3w ago

Architecture Diagram

Generates dark-themed SVG architecture, cloud, or infrastructure diagrams as standalone HTML files. Ideal for system architectures, microservices, and deployment visualizations without dependencies.
DevOps
1858
📡
3w ago

Blogwatcher

Monitor blogs and RSS/Atom feeds using blogwatcher-cli. Supports automatic feed discovery, OPML import/export, and read/unread article tracking for daily updates.
Automation
1858
👤
3w ago

Bootstrap

Generates a detailed user profile through a structured 5-8 round onboarding conversation, adapting to the user's language and style. Use when setting up a new agent or refreshing an agent's understanding of the user.
AI Engineering
1858
📊
3w ago

Chart Visualization

Transforms data into visual charts by intelligently selecting chart types, extracting parameters, and generating chart images using Python matplotlib/plotly.
Data
1858

More Frontend skills

Frontend Design is one of 567 Frontend skills cataloged on DirSkills, ranked #526 by stars among them.

Browse all Frontend skills →
🅰️
3w ago

Angular Developer

Angular Developer generates Angular code and provides architectural guidance for Angular projects. Use it for creating projects, components, or services, or for best practices on reactivity, forms, DI, routing, SSR, accessibility, animations, styling, testing, and CLI tooling.
Frontend
239.8K36.4K
🏗️
3w ago

Android Clean Architecture

Android Clean Architecture provides patterns for structuring Android and Kotlin Multiplatform projects, covering module boundaries, UseCases, Repositories, and data layer with Room, SQLDelight, and Ktor. Use it when setting up layered architecture in Android or KMP projects.
Frontend
239.8K36.4K
♿
3w ago

Accessibility

Accessibility helps design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards for keyboard, contrast, and screen-reader support. Use it when building or auditing UI that must meet WCAG 2.2 Level AA or reviewing changes for accessibility.
Frontend
239.8K36.4K