🎨
FrontendTypeScript

Web Design

by Prism-Shadow

Web Design is a Frontend skill for Claude Code, published by Prism-Shadow in penguin-harness.

1.5K stars150 forkson Prism-Shadow/penguin-harnessAdded 2026/08/19+21% in starsRepository updated 2026/08/19
View source on GitHubDownload repo ZIP
agentagentic-aiaibuild-toolclaude-codedeepseekdeepseek-harnessdesktopharnessllmrsiself-evolving
Install in seconds
Install Web Design
Copy Web 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/Prism-Shadow/penguin-harness/tree/main/packages/skills/skills/web-design ~/.claude/skills/web-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/Prism-Shadow/penguin-harness.git

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

In this catalog

Source file
packages/skills/skills/web-design/SKILL.md in Prism-Shadow/penguin-harness
Installs to
~/.claude/skills/web-design
Collection
One of 21 skills cataloged from this repository
Category
Frontend — 567 skills

What Web Design does

Web Design provides a Penguin visual language for generated web pages and app UIs, with GitHub-style simplicity, a single blue accent, light and pure-black dark themes, design tokens, and component recipes. Use it as the default for generated frontends unless specified.

Web Design is cataloged under Frontend on DirSkills. Web Design comes from a repository tagged agent, agentic-ai, ai, build-tool and claude-code.

Commands Web Design provides

Slash commands named in this skill’s SKILL.md, listed in the order they first appear.

  • /dark
  • /white

Frequently asked about Web Design

  • What else does Prism-Shadow publish alongside Web Design?

    Web Design is one of 21 skills that DirSkills catalogs from Prism-Shadow/penguin-harness, the repository it ships in. Its siblings there include Agent Creation, Agent Evaluation and Agent Optimization. Each one is a separate skill with its own page in this directory, installs the same way Web Design does, and is maintained by Prism-Shadow in that same repository. The rest of the collection is listed on the Prism-Shadow/penguin-harness page.

  • How does Web Design compare to other Frontend skills?

    Web Design ranks #282 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 Web Design against them. Open each page to compare what they document and how they install.

More from Prism-Shadow/penguin-harness

Web Design is one of 21 skills cataloged on DirSkills from Prism-Shadow/penguin-harness.

See all 21 skills →
🤖
2w ago

Agent Creation

Agent Creation turns a user requirement into a working agent configuration by writing AGENTS.md, setting identity metadata, and installing only needed skills. Use it to create or configure an Agent State under the agents directory.
AI Engineering
1.5K149
🧪
2w ago

Agent Evaluation

Agent Evaluation runs one specified test agent on one benchmark case exactly once, privately scores the execution, and returns one protocol result. Use it when a run_subagent caller needs a single isolated agent evaluation without managing loops or scoreboards.
AI Engineering
1.5K149
🧪
2w ago

Agent Optimization

Agent Optimization improves one Test Agent through an evidence → hypothesis → Candidate → evaluation → accept or rollback loop. It uses a frozen Benchmark, Scoreboard, and public Test Traces as black-box feedback while delegating all evaluation to an agent-evaluation subagent.
AI Engineering
1.5K149
🤖
2w ago

AgentHub Models

AgentHub Models calls model APIs through @prismshadow/agenthub for streaming text, image generation, speech synthesis, embeddings, and the supported-model registry with one client. Use it when building AI apps that need a single TypeScript client for multiple model providers.
AI Engineering
1.5K150
🧪
2w ago

Benchmark Design

Benchmark Design builds and calibrates a multi-Case capability benchmark for one Test Agent and establishes a traceable Formal Baseline. Use it when you need to design, pilot, and freeze a benchmark without changing the test agent.
AI Engineering
1.5K150
📽️
2w ago

Bento Slides

Bento Slides creates and edits Bento presentations — self-contained .bento.html decks whose document is JSON. Use it when the user wants a slide deck or presentation, whether from scratch, from source material, or by improving an existing file.
Frontend
1.5K150

More Frontend skills

Web Design is one of 567 Frontend skills cataloged on DirSkills, ranked #282 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