mcpbeat Sign in

Form Style Agent Skill

| Use when asked to select a UI style, choose a design direction, pick a visual fits a fintech app", "choose between neumorphism and glassmorphism", "design direction for healthcare SaaS"

700 tokens
context cost
SKILL.md, read when the skill is used
2
files
plus reference files
0
copies elsewhere
how many repositories repackaged it
2 679
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/jeremylongshore/tons-of-skills-marketplace --skill form-style

What comes with it

273 bytes besides the instruction
.claude-plugin/plugin.json

The instruction itself

6 sections, as written by the author

form-style — UI Style Selection

Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.

When to use

Product needs a visual direction. Industry or product type is known or discoverable from context.

Workflow

  • Identify product type from user request or project context
  • Search product reasoning:
   python3 -m form_agent.uiux search --domain product --query "{product_type}" --limit 3
  • Get recommended style details:
   python3 -m form_agent.uiux search --domain style --query "{recommended_style}" --limit 3
  • Cross-reference anti-patterns from the product search results — check the Anti_Patterns field
  • Output the recommendation using the format below

Output format

┌─ Style Recommendation ─────────────────────┐
│ Product:     {product_type}                 │
│ Style:       {primary_style}                │
│ Fallback:    {secondary_style}              │
├─ Effects ───────────────────────────────────┤
│ {key_effects from style search}             │
├─ Anti-patterns ─────────────────────────────┤
│ ✗ {anti_pattern_1}                          │
│ ✗ {anti_pattern_2}                          │
├─ Implementation Checklist ──────────────────┤
│ □ {checklist_item_1}                        │
│ □ {checklist_item_2}                        │
└─────────────────────────────────────────────┘

Anti-patterns

  • Never pick style based on aesthetics alone — match to product type + audience
  • Never ignore anti-pattern list from reasoning rules
  • Never recommend more than 2 combined styles (primary + fallback)
  • Never recommend a style marked as incompatible with the target framework

Delivery

If output exceeds the 40-line CLI budget, invoke /atlas-report with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.

How to use it

Copy the folder

Take jeremylongshore/form-style from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.