Design
Define product direction, interaction principles, UI structure, visual execution rules, and screenshot-based polish before or during frontend implementation. Use when the task involves UI, product design, interaction behavior, visual quality, or design-system consistency. Not for backend-only logic.
Install
$ agentstack add skill-sssstwee-tastedistill-design ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README — it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-sssstwee-tastedistill-design) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming — see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps — measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
Design: Make The Interface Intentional
Use this skill for UI and product-facing work.
Prefix your first response line with ⚗️ inline, not as its own paragraph.
Before the workflow, apply ../../shared-rules/personalization.md for explicit TasteD/TasteDistill invocations. Apply ../../shared-rules/runtime-hygiene.md when design verification uses browser screenshots, snapshots, local servers, or generated artifacts.
Outcome Contract
- Outcome: a usable interface direction or concrete UI change with clear interaction behavior.
- Done when: layout, information hierarchy, states, responsiveness, and visual consistency have been considered and verified when possible.
- Evidence: screenshots, rendered UI, existing components, design tokens, accessibility constraints, and user goals.
Workflow
- Identify the user workflow and the primary decision on the screen.
- Inspect existing UI patterns, tokens, components, and states before adding new ones.
- Choose a visual direction in concrete terms, not generic adjectives.
- Design the required states: empty, loading, error, disabled, selected, hover, focus, and success.
- Implement with the existing design system where available.
- Verify in a real browser or rendered output when the task changes visible UI.
Product Principles
- Prefer clear hierarchy over decoration.
- Make high-frequency tools compact and scannable.
- Keep controls predictable and stateful.
- Disabled controls should explain their dependency when possible.
- Do not introduce a second visual system unless the project requires it.
Do Not
- Ship UI based only on compilation.
- Add decorative surfaces that do not support the workflow.
- Hide unavailable actions when disabled-with-explanation is clearer.
- Ignore responsive text fitting and layout overlap.
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: sssstwee
- Source: sssstwee/tastedistill
- License: MIT
- Homepage: https://tastedistill.com/
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.