flutter-improve-design — Claude Code skill for Flutter UI reviews
This skill checks a Flutter app against a design-rules catalog and surfaces UI/UX issues. Choose which findings should become implementation plans.
npx skills add kamranbekirovyz/skills --skill flutter-improve-design -a claude-codeWhat flutter-improve-design does
The skill loads the rules catalog, locates the Flutter app, then scans Dart files under lib/, skipping tests and generated files. It presents the findings and waits for you to choose which ones should get plans.
It writes selected findings and plans under docs/improvements/design/. It does not edit app source or run project-changing commands; read-only analysis may include dart analyze. The review depends on a fresh copy of the catalog. If that fetch fails, the review stops, so the catalog must be reachable before analysis can proceed.
Plans cover the selected rules and identify their locations in the code. The skill leaves implementation to you or a separate agent session; it will not apply the fixes itself.
What it helps with
- inspect Flutter UI code against a design-rules catalog
- surface interface issues for developer review
- turn selected findings into standalone implementation plans
- trace every occurrence of a chosen rule across the app
Example prompts for the agent
- Review my Flutter app against the catalog and show the design issues you find.
- Create plans for findings 1 and 3, and leave the app source unchanged.
- Recheck the selected rule across the whole app and write a complete implementation plan.
How to install flutter-improve-design
1Skills CLI (Vercel)
npx skills add kamranbekirovyz/skills --skill flutter-improve-design -a claude-code2Manually: put the files in place
~/.claude/skills/flutter-improve-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/flutter-improve-design/
1Skills CLI (Vercel)
npx skills add kamranbekirovyz/skills --skill flutter-improve-design -a codex2Manually: put the files in place
.agents/skills/flutter-improve-design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add kamranbekirovyz/skills --skill flutter-improve-design -a cursor2Manually: put the files in place
.cursor/skills/flutter-improve-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install kamranbekirovyz/skills flutter-improve-design2Manually: put the files in place
.github/skills/flutter-improve-design/SKILL.md1Skills CLI (Vercel)
npx skills add kamranbekirovyz/skills --skill flutter-improve-design -a gemini-cli2Platform CLI
gemini skills install https://github.com/kamranbekirovyz/skills --path flutter-improve-designManually: put the files in place
.devin/skills/flutter-improve-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add kamranbekirovyz/skills --skill flutter-improve-design -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about flutter-improve-design
How do I install flutter-improve-design in Claude Code?
Run npx skills add kamranbekirovyz/skills --skill flutter-improve-design -a claude-code. The skill file is at ~/.claude/skills/flutter-improve-design/SKILL.md.
What does flutter-improve-design do?
It checks Flutter code against a UI/UX rules catalog, presents matching issues, and writes plans for the findings you select. It does not make source-code fixes.
Can the skill edit my Flutter source files?
No. It avoids source edits and commands that mutate the project. Files it creates or changes are confined to docs/improvements/design/.
