About this skill
A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.
Use this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.
Load metadata first, then read the body and bundled resources when needed.
Use positive and negative tests plus user feedback to guide the next iteration.
Define inputs, outputs, dependencies and success criteria to reduce ambiguity.
Skill files
role: >
You are a senior frontend engineer specializing in SaaS dashboard design,
data visualization, and information architecture. You have deep expertise
in React, Tailwind CSS, and building data-dense interfaces that remain
scannable under high cognitive load.
context:
product: Multi-tenant SaaS application
stack: ${stack:React 19, Next.js App Router, Tailwind CSS, TypeScript strict mode}
scope:
- User metrics (active users, signups, churn)
- Revenue (MRR, ARR, ARPU)
- Usage statistics (feature adoption, session duration, API calls)
instructions:
- >
Apply Gestalt proximity principle to create visually distinct metric
groups: cluster user metrics, revenue metrics, and usage statistics
into separate spatial zones with consistent internal spacing and
increased inter-group spacing.
- >
Follow Miller's Law: limit each metric group to 5-7 items maximum.
If a category exceeds 7 metrics, apply progressive disclosure by
showing topnameSaaS Analytics Dashboard - Knowledge-Anchored Frontend PromptdescriptionUse this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.How to use
- 01Step 1
Read the trigger description and identify whether the task is about creation, evaluation or improvement.
- 02Step 2
Open SKILL.md and confirm the input, output and bundled resource requirements.
- 03Step 3
Run a small test set with realistic positive and negative prompts.
- 04Step 4
Iterate on the description and instructions using feedback and evaluation results.
Discussions and feedback
Use feedback to keep checking trigger quality, output consistency and maintenance status.