Skip to content

Commit 01e7e75

Browse files
authored
docs(web): add design context for marketplace web app (#128)
Add .impeccable.md with full design context and reference it from CLAUDE.md. Defines five key design principles for apps/web/: content clarity, polish, efficient discovery, inclusivity, and design system loyalty.
1 parent 54be2be commit 01e7e75

2 files changed

Lines changed: 37 additions & 1 deletion

File tree

.impeccable.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
## Design Context
2+
3+
### Users
4+
Developers and engineering teams who use Claude Code and want to extend it with plugins. They arrive with a specific intent: discover, evaluate, and install plugins quickly. Both individual developers seeking productivity tools and teams evaluating plugins for adoption. The interface should evoke **confidence, efficiency, and trust** -- users are installing code that runs in their development environment, so credibility signals matter.
5+
6+
### Brand Personality
7+
**Polished, modern, trustworthy.**
8+
9+
Voice is technical but approachable. Tone is confident without being corporate. The marketplace should feel like a curated, well-maintained ecosystem rather than a dumping ground. Passion Factory maintains this as a community resource, so it should communicate care and quality.
10+
11+
### Aesthetic Direction
12+
- **Visual tone:** Clean and refined, similar to Vercel, Linear, or Nuxt Modules. Premium developer tool aesthetic with generous whitespace, clear hierarchy, and purposeful use of color.
13+
- **References:** Vercel Marketplace (sleek cards, trust signals), Nuxt Modules (clean grid, developer-friendly), Linear (refined spacing, dark mode excellence)
14+
- **Anti-references:** WordPress plugin directory (cluttered, ad-heavy), generic SaaS landing pages (stock photos, marketing fluff), overly playful/childish aesthetics
15+
- **Theme:** Light and dark mode (already supported via Nuxt UI). Dark mode should feel first-class, not an afterthought.
16+
- **Colors:** Nuxt UI defaults with primary color. Badge colors (amber, orange, purple, blue) for author/feature differentiation. No custom brand palette needed -- lean into the design system.
17+
- **Typography:** System font stack with Korean support (already configured). Prioritize readability and clear hierarchy over decorative typography.
18+
- **Icons:** Heroicons (UI) + Simple Icons (brand logos). Consistent sizing and alignment.
19+
20+
### Design Principles
21+
22+
1. **Content-first clarity** -- Plugin name, description, and install action should be instantly scannable. Every visual element must earn its place.
23+
2. **Trust through polish** -- Consistent spacing, aligned elements, and refined details signal that this marketplace (and its plugins) are well-maintained.
24+
3. **Efficient discovery** -- Users should find what they need in seconds. Search, filter, and card layout should minimize cognitive load.
25+
4. **Inclusive by default** -- WCAG AA compliance, respects reduced motion preferences, works well in both light and dark modes, supports Korean and English text.
26+
5. **Design system loyalty** -- Use Nuxt UI components and Tailwind utilities as intended. Avoid custom CSS overrides unless the design system genuinely can't express the intent. Consistency > novelty.

CLAUDE.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -481,4 +481,14 @@ Run this before committing new plugins or after modifying `plugin.json`.
481481
- This repository serves as both a plugin marketplace and a collection of plugin implementations
482482
- Each plugin can be independently versioned and released
483483
- MCP servers provide the runtime interface between Claude Code and plugin functionality
484-
- Plugins are designed to be easily toggled on/off by users
484+
- Plugins are designed to be easily toggled on/off by users
485+
486+
## Design Context
487+
488+
See `.impeccable.md` for full design context. Key principles for the marketplace web app (`apps/web/`):
489+
490+
1. **Content-first clarity** -- Plugin name, description, and install action should be instantly scannable.
491+
2. **Trust through polish** -- Consistent spacing, aligned elements, and refined details.
492+
3. **Efficient discovery** -- Users should find what they need in seconds.
493+
4. **Inclusive by default** -- WCAG AA, reduced motion, light/dark mode, Korean + English.
494+
5. **Design system loyalty** -- Use Nuxt UI components and Tailwind as intended. Consistency > novelty.

0 commit comments

Comments
 (0)