Frontend design direction — anti-generic design guidance
Choose a deliberate aesthetic direction (purpose, audience, tone, constraints) and build polished UI that avoids generic AI aesthetics — salvaged community guidance, not the official Anthropic skill
- What
- Choose a deliberate aesthetic direction (purpose, audience, tone, constraints) and build polished UI that avoids generic AI aesthetics — salvaged community guidance, not the official Anthropic skill
- Cost
- Free
- Needs
- a frontend project or UI request to apply it to — the skill is design guidance the agent follows, not software to install
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @affaan-m's frontend design-direction skill: before coding, choose a deliberate direction — the interface's purpose, its audience, an explicit tone (utilitarian, editorial, playful, industrial, refined…), one memorable detail, and the real constraints (framework, accessibility, performance, existing design system) — then build the actual usable experience as the first screen. It pushes the agent to reuse existing components, tokens and routing before inventing a visual system, prefer contextual typography over oversized hero text, keep palettes multi-dimensional, use motion sparingly but deliberately, and verify text fit on mobile and desktop. The anti-pattern list is the point: no purple gradients, decorative blobs, oversized cards, vague hero copy, stock-like media, or cards-inside-cards. Ends with a review checklist (first viewport communicates the product, hierarchy supports scanning, contrast holds, responsive dimensions are stable). Honest caveats: salvaged from a stale community PR (#1659) — the file itself says to install the official Anthropic `frontend-design` skill for the canonical upstream version (see the `anthropics-claude-code-frontend-design` listing); the skill lives under the repo's Japanese docs path (docs/ja-JP/…) though the content is in English. MIT licensed. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a frontend project or UI request to apply it to — the skill is design guidance the agent follows, not software to install Install "Frontend design direction — anti-generic design guidance" for me. It gives my agent @affaan-m's design-direction workflow: before coding, pick a deliberate aesthetic direction (purpose, audience, explicit tone, one memorable detail, real constraints), build the actual usable experience first, reuse existing components and tokens, prefer contextual typography and multi-dimensional palettes, use motion deliberately, and check every UI against a review checklist. Includes an anti-pattern list (purple gradients, decorative blobs, oversized cards, vague hero copy, cards-inside-cards). MIT-licensed. Note: the skill itself recommends the official Anthropic frontend-design skill for the canonical upstream version (also listed here). Repository: https://github.com/affaan-m/ecc/blob/main/docs/ja-JP/skills/frontend-design-direction/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "frontend-design-direction". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. point the agent at the UI to build or polish; nothing else — it's a methodology). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.