| name | morphofeed-ui-quality |
| description | Refines MorphoFeed marketing UI for a calm, editorial, industrial tone. Use when the user asks for design polish, layout fixes, “better visuals,” or criticizes the home page as busy, cheap, generic, or template-like. Prefer restraint, typography, spacing, and token discipline over decorative placeholder diagrams. Works with tailwind.config.ts and src/styles/index.css; copy stays in src/content/morphofeed.ts. |
MorphoFeed UI quality
For page strategy (artifact reframe, job of the page, brand vs proof layering, scan-first), read morphofeed-commercial-web-doctrine first; this skill focuses on visual restraint and execution.
Principles
- Restraint over decoration — Extra SVG “diagrams” that repeat the same frame/border pattern read as filler. Prefer one strong visual per page region (e.g.
MorphologyField), subtle gradients, or real Figma-approved art—not a diagram beside every paragraph.
- Typography carries the brand — Cormorant + DM Sans, clear hierarchy, comfortable line length (
max-w-prose / max-w-xl for body), avoid shrinking all body to text-sm unless the section is explicitly compact.
- Spacing and rhythm — Consistent section padding,
space-y / gap that breathes; avoid cramming two-column grids when a single column + hero visual reads more premium.
- Tokens only —
canvas, surface, parchment, subtle, brand, moss, ember from tailwind.config.ts; no random hex unless mapped.
When changing Home
- Read existing sections under
src/features/home/components/sections/ before adding new visual components.
- If removing or replacing
src/components/visuals/home/* diagrams, reduce duplication: keep layouts that read clean at a glance in the browser (use cursor-ide-browser MCP to snapshot if needed).
- Figma path: For production-aligned layout, prefer skills under the user’s
~/.cursor/skills/ — figma-use, figma-generate-design, figma-implement-design — plus project rule figma-morphofeed.mdc for file keys and tokens.
MCP tools that help
- user-shadcn — Search/list registry items, examples, add commands for consistent primitives if the stack adopts shadcn patterns.
- user-tailkit — Tailwind/UI reference (authenticate if the server requires
mcp_auth).
- cursor-ide-browser — Verify contrast, spacing, and “cheap” vs “calm” after changes.
Anti-patterns
- Stacking many bordered SVG panels with the same corner radius across every section.
- Forcing a strict 30/70 split when a simpler layout looks better (treat ratio as guidance, not law).
- Replacing approved copy in
morphofeed.ts without explicit user approval.
