Claude Code Flutter skill for a themed iOS-style primary button
Use the themed ButtonWidget for a primary action and the lower-level Cupertino widget when custom loading behavior is needed.
中文Install in Claude Code
Open Claude Code in a Flutter demo with Sampaio Tech's iOS Design System available. Confirm ButtonWidget and CupertinoButtonWidget are exposed in the version in use.
- Review `.claude/skills/button-system/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/button-system/` in your project and save the reviewed file as `.claude/skills/button-system/SKILL.md`.
- Start Claude Code from that project's root, then select `/button-system` in the slash menu.
Example task
Choose a themed primary button for a trail list. Use the fixture label and the design system's large blue variant, then check its callback locally.
`Browse trails` · `ButtonWidget.label` · `LargeButtonSize` · `BlueButtonColor`What to check
The page shows `Browse trails` with `LargeButtonSize` and `BlueButtonColor`. Activating the button invokes its supplied callback.
Original SKILL.md on GitHub · Updated
Frequently asked question
Do I need a separate component for loading?
The existing `CupertinoButtonWidget` supports a loading indicator and callback control. Verify both waiting and completed states with the installed version.