Skip to content

feat: enhance frontend-design skill with Anthropic best practices#2

Open
nniel-ape wants to merge 3 commits intoDammyjay93:mainfrom
nniel-ape:prettify-improvements
Open

feat: enhance frontend-design skill with Anthropic best practices#2
nniel-ape wants to merge 3 commits intoDammyjay93:mainfrom
nniel-ape:prettify-improvements

Conversation

@nniel-ape
Copy link

Summary

Comprehensive enhancement of the frontend-design skill, integrating official Anthropic creative guidance with detailed craft rules.

What's New

Creative Philosophy (from Anthropic)

  • Design Thinking intro emphasizing differentiation over generic AI aesthetics
  • Creative Extremes section (brutalist, retro-futuristic, luxury editorial, playful/whimsical)
  • Backgrounds & Visual Details (gradient meshes, noise, grain overlays, geometric patterns)
  • Motion philosophy — high-impact moments over scattered micro-interactions
  • "AI Slop to Avoid" anti-patterns section with concrete examples

Craft Rules (preserved & enhanced)

  • 4px grid system, symmetrical padding, border radius strategy
  • Typography hierarchy with specific scales (1.125 / 1.2 / 1.25)
  • Card layouts, isolated controls, depth strategy
  • Dark mode considerations and navigation context
  • CSS code examples and implementation patterns

Infrastructure

  • Plugin support via .claude-plugin/plugin.json for one-click installation
  • Renamed skill from design-principlesfrontend-design
  • Restructured to skills/SKILL.md (standard location)
  • Cleaned up deprecated install script

Test Plan

  • Install via plugin manifest URL
  • Verify skill activates on frontend design requests
  • Check creative extremes are applied appropriately
  • Verify anti-patterns are avoided in generated code

- Rename skill file to SKILL.md (uppercase convention)
- Update skill name, description, and invocation command
- Update installation paths and documentation
- Improve prose consistency (contractions → formal style)
- Clarify design direction sections with consistent formatting
- Add .claude-plugin/plugin.json manifest for plugin install
- Move skill/SKILL.md to skills/SKILL.md (plugin convention)
- Update README with plugin installation as recommended method
- Remove install.sh (replaced by plugin system)
Integrate creative philosophy and anti-AI-slop guidance while preserving
detailed craft rules:

- Add "Design Thinking" section with bold aesthetic direction
- Add Creative Extremes (brutalist, retro-futuristic, luxury, etc.)
- Add Spatial Composition and Backgrounds/Visual Details sections
- Expand Motion & Animation with philosophy and patterns
- Add "AI Slop to Avoid" anti-patterns section
- Add closing encouragement for creative work
@albanx
Copy link

albanx commented Jan 16, 2026

did you test this? Any good result?

@nniel-ape
Copy link
Author

did you test this? Any good result?

year, using it as the main design skill for me. Hard to compare with other, mostly developed backend. As I see author choose his own way

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants