Skill
playwriter
Control the user own Chrome browser via Playwriter extension with Playwright code snippets in a stateful local js sandbox via…
@agiflowInstall SkillScaffolding
Skill
/discover-design-system
Discover existing project themes, supported CSS classes and reusable UI components. Trigger for frontend styling or component-selection requests. Do not trigger for unrelated backend changes or executing visual previews.
Install
$ npx -y skills add agiflow/aicode-toolkit --skill discover-design-system --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/discover-design-system
Context preview
The summary Claude sees to decide when to auto-load this skill.
Discover existing project themes, supported CSS classes and reusable UI components. Trigger for frontend styling or component-selection requests. Do not trigger for unrelated backend changes or executing visual previews.
SKILL.md
discover-design-system.SKILL.mdname: discover-design-system description: 'Discover existing project themes, supported CSS classes and reusable UI components. Trigger for frontend styling or component-selection requests. Do not trigger for unrelated backend changes or executing visual previews.'
Discover the design system
1. Confirm the consumer workspace has suitable project design configuration. Inspect the actual available schemas for `list_themes`, `get_css_classes`, `list_shared_components` and `list_app_components` (snake_case names), rather than inventing arguments. 2. Look for existing shared and app components, then supported themes and classes before suggesting new markup or CSS. Pass the requested app path, tags and pagination cursor where supported. Until a style-system release with argument forwarding is published, `list_themes` and `list_shared_components` may ignore filters in the published `0.2.0`; check results manually. 3. Give the user concrete candidates with source paths, relevant classes and uncertainty. Do not execute `get_component_visual` without a trusted-workspace check: it runs consumer code and build tools.
Ships withaicode-toolkit
This repo provides: project and feature scaffolding via templates file-level design guidance before edits rule-based review after edits design-system discovery for frontend work
Get the whole plugin
Stats
161
Stars
23
Forks
Active
Maintenance
TypeScript
Language
AGPL-3.0
License
1d ago
Last commit
1y ago
Created
2h ago
Added
Other skills on aicode-toolkit.
@agiflowInstall SkillSkill
author-templates
Create or update reusable toolkit boilerplate templates and feature scaffolds. Trigger for explicit template-authoring requests.…
@agiflowInstall SkillSkill
manage-patterns-and-ru…
Author project design patterns and coding rules with architect-mcp admin tools. Trigger when the user asks to change pattern or…
@agiflowInstall SkillSkill
create-project
Discover and create a new application from a scaffold-mcp boilerplate. Trigger for requests to start a new project. Do not…
@agiflowInstall SkillSkill
initialize-workspace
Set up toolkit templates and project metadata in a consumer workspace. Trigger when the user asks to initialize AI Code Toolkit…
@agiflowInstall SkillSkill
preview-component
Render and inspect a design-system component in a trusted project. Trigger for explicit visual component preview requests. Do not…
@agiflowInstall Skill