Skip to content

Commit 2759be2

Browse files
PHKennyclaude
PHKenny
and
claude
committed
chore(claude-plugin): add restructured skills under .claude/ with api references
Introduce updated skill definitions with individual api.md reference files for all layrz_theme components, replacing the legacy flat structure. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent f544dbe commit 2759be2

65 files changed

Lines changed: 7777 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.claude/plugin.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "layrz-theme",
3+
"description": "Claude Code skills for layrz-theme Flutter widget library",
4+
"version": "7.5.27",
5+
"author": {
6+
"name": "Golden M, Inc.",
7+
"url": "https://github.com/goldenm-software"
8+
},
9+
"repository": "https://github.com/goldenm-software/layrz_theme",
10+
"license": "MIT",
11+
"skills": "./.claude/skills/"
12+
}

‎.claude/skills/responsive-col/SKILL.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
name: responsive-col
3+
description: Use ResponsiveCol in a layrz Flutter widget. Apply when defining a column's width at different breakpoints inside a ResponsiveRow.
4+
---
5+
6+
> **Dart syntax:** This library requires Dart ≥ 3.10. Use dot shorthand for all enum values (e.g. `.col6`, `.start`, `.left`) — never write the fully-qualified form (`Sizes.col6`, `WrapAlignment.start`).
7+
8+
> **Full constructor, Sizes enum, breakpoints, and examples:** read `references/api.md` in this skill's directory.
9+
10+
---
11+
12+
## When to use
13+
14+
- Defining width at different screen sizes for a child inside a `ResponsiveRow`
15+
- Any widget that needs to be full-width on mobile and narrower on larger screens
16+
17+
Always a child of `ResponsiveRow`. Never used standalone.
18+
19+
---
20+
21+
## Minimal usage
22+
23+
```dart
24+
ResponsiveCol(
25+
xs: .col12, // full width on mobile
26+
md: .col6, // half width on desktop
27+
child: MyWidget(),
28+
)
29+
```
30+
31+
---
32+
33+
## Key behaviors
34+
35+
- `xs` defaults to `.col12` but should always be set explicitly — it's the fallback for all other breakpoints.
36+
- Fallback chain: `xl ?? lg ?? md ?? sm ?? xs` — only set breakpoints that differ.
37+
- Uses `LayoutBuilder` internally — breakpoint is evaluated against the col's own available width, not the screen width.
38+
- Width formula: `(containerWidth / 12) * gridSize`.
39+
40+
---
41+
42+
## Breakpoints
43+
44+
| Param | Constant | Range |
45+
|---|---|---|
46+
| `xs` | `kExtraSmallGrid = 600` | < 600 px |
47+
| `sm` | `kSmallGrid = 960` | 600–959 px |
48+
| `md` | `kMediumGrid = 1264` | 960–1263 px |
49+
| `lg` | `kLargeGrid = 1904` | 1264–1903 px |
50+
| `xl` | — | ≥ 1904 px |
51+
52+
---
53+
54+
## Common patterns
55+
56+
```dart
57+
// All breakpoints explicit
58+
ResponsiveCol(
59+
xs: .col12,
60+
sm: .col6,
61+
md: .col4,
62+
lg: .col3,
63+
xl: .col2,
64+
child: ProductCard(),
65+
)
66+
67+
// Lazy — only set what changes
68+
ResponsiveCol(
69+
xs: .col12, // mobile: full width
70+
lg: .col6, // desktop: half (sm and md also get col12 via fallback)
71+
child: SectionWidget(),
72+
)
73+
```

‎.claude/skills/responsive-col/references/api.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
# ResponsiveCol — API Reference
2+
3+
Sources:
4+
- `ResponsiveCol` — `lib/src/grid/src/col.dart` line 3
5+
- `Sizes` enum + `SizesExt` — `lib/src/grid/src/sizes.dart` line 11
6+
- Breakpoint constants — `lib/src/theme/src/constants.dart`
7+
8+
---
9+
10+
## Breakpoint constants
11+
12+
| Constant | Value | Param | Range |
13+
|---|---|---|---|
14+
| `kExtraSmallGrid` | `600` | `xs` | < 600 px |
15+
| `kSmallGrid` | `960` | `sm` | 600–959 px |
16+
| `kMediumGrid` | `1264` | `md` | 960–1263 px |
17+
| `kLargeGrid` | `1904` | `lg` | 1264–1903 px |
18+
| — | — | `xl` | ≥ 1904 px |
19+
20+
Fallback chain (from `_currentSize`):
21+
22+
```
23+
width < 600 → xs
24+
600 ≤ width < 960 → sm ?? xs
25+
960 ≤ width < 1264 → md ?? sm ?? xs
26+
1264 ≤ width < 1904 → lg ?? md ?? sm ?? xs
27+
width ≥ 1904 → xl ?? lg ?? md ?? sm ?? xs
28+
```
29+
30+
---
31+
32+
## Constructor
33+
34+
```dart
35+
const ResponsiveCol({
36+
super.key,
37+
this.xs = .col12, // Sizes — base fallback for all breakpoints
38+
this.sm, // Sizes?
39+
this.md, // Sizes?
40+
this.lg, // Sizes?
41+
this.xl, // Sizes?
42+
required this.child, // Widget
43+
})
44+
```
45+
46+
## Properties
47+
48+
| Property | Type | Default | Notes |
49+
|---|---|---|---|
50+
| `xs` | `Sizes` | `.col12` | < 600 px. Always set explicitly — fallback for all other breakpoints |
51+
| `sm` | `Sizes?` | `null` | 600–959 px. Falls back to `xs` |
52+
| `md` | `Sizes?` | `null` | 960–1263 px. Falls back to `sm → xs` |
53+
| `lg` | `Sizes?` | `null` | 1264–1903 px. Falls back to `md → sm → xs` |
54+
| `xl` | `Sizes?` | `null` | ≥ 1904 px. Falls back to `lg → md → sm → xs` |
55+
| `child` | `Widget` | required | |
56+
57+
Rendered via `LayoutBuilder` — breakpoint is evaluated against the col's own constraint width.
58+
Width formula: `(containerWidth / 12) * gridSize`
59+
60+
---
61+
62+
## Sizes enum
63+
64+
Source: `lib/src/grid/src/sizes.dart` line 11
65+
66+
```dart
67+
enum Sizes { col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11, col12 }
68+
```
69+
70+
| Value | Columns | % of parent |
71+
|---|---|---|
72+
| `.col1` | 1 | 8.3% |
73+
| `.col2` | 2 | 16.7% |
74+
| `.col3` | 3 | 25% |
75+
| `.col4` | 4 | 33.3% |
76+
| `.col6` | 6 | 50% |
77+
| `.col8` | 8 | 66.7% |
78+
| `.col9` | 9 | 75% |
79+
| `.col12` | 12 | 100% |
80+
81+
### SizesExt extension
82+
83+
```dart
84+
extension SizesExt on Sizes {
85+
double boxWidth(double width) // (width / 12) * gridSize
86+
int get gridSize // column count 1–12
87+
}
88+
```
89+
90+
---
91+
92+
## Examples
93+
94+
```dart
95+
// Minimum — full on mobile, half on desktop
96+
ResponsiveCol(
97+
xs: .col12,
98+
md: .col6,
99+
child: MyWidget(),
100+
)
101+
102+
// All breakpoints explicit
103+
ResponsiveCol(
104+
xs: .col12,
105+
sm: .col6,
106+
md: .col4,
107+
lg: .col3,
108+
xl: .col2,
109+
child: ProductCard(),
110+
)
111+
112+
// Lazy — only set what changes from xs
113+
ResponsiveCol(
114+
xs: .col12, // mobile + tablet: full width (sm and md fall back to xs)
115+
lg: .col6, // desktop: half width
116+
child: SectionWidget(),
117+
)
118+
119+
// Sidebar — narrow on large screens
120+
ResponsiveCol(
121+
xs: .col12,
122+
lg: .col3,
123+
child: Sidebar(),
124+
)
125+
126+
// Content area — remaining space after sidebar
127+
ResponsiveCol(
128+
xs: .col12,
129+
lg: .col9,
130+
child: MainContent(),
131+
)
132+
133+
// Divider spanning full width
134+
const ResponsiveCol(child: Divider())
135+
136+
// Real example from example app — code editor side by side
137+
ResponsiveCol(
138+
xs: .col12,
139+
md: .col6,
140+
child: ThemedCodeEditor(
141+
labelText: 'Python example',
142+
language: LayrzSupportedLanguage.python,
143+
value: _pythonCode,
144+
onChanged: (val) => setState(() => _pythonCode = val),
145+
),
146+
)
147+
```

‎.claude/skills/responsive-row/SKILL.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
name: responsive-row
3+
description: Use ResponsiveRow in a layrz Flutter widget. Apply when wrapping ResponsiveCol children in a responsive 12-column grid container.
4+
---
5+
6+
> **Dart syntax:** This library requires Dart ≥ 3.10. Use dot shorthand for all enum values (e.g. `.col6`, `.start`, `.left`) — never write the fully-qualified form (`Sizes.col6`, `WrapAlignment.start`).
7+
8+
> **Full constructor and examples:** read `references/api.md` in this skill's directory.
9+
10+
---
11+
12+
## When to use
13+
14+
- Wrapping a set of `ResponsiveCol` children in a flex container that reflows automatically
15+
- Needs spacing, horizontal alignment, or vertical alignment between columns
16+
- Building from a dynamic list → use `ResponsiveRow.builder`
17+
18+
Always paired with `ResponsiveCol` as children. For breakpoint logic and `Sizes` enum, see the `responsive-col` skill.
19+
20+
---
21+
22+
## Minimal usage
23+
24+
```dart
25+
ResponsiveRow(
26+
children: [
27+
ResponsiveCol(xs: .col12, md: .col6, child: WidgetA()),
28+
ResponsiveCol(xs: .col12, md: .col6, child: WidgetB()),
29+
],
30+
)
31+
```
32+
33+
---
34+
35+
## Key behaviors
36+
37+
- Renders as `SizedBox(width: double.infinity, child: Wrap(...))` — always full parent width.
38+
- `children` only accepts `List<ResponsiveCol>` — use `ResponsiveCol(child: Divider())` for dividers.
39+
- `builder` takes `ResponsiveCol Function(int)` — not `Widget Function(BuildContext, int)`.
40+
- `spacing` is horizontal gap between columns in pixels (default `0`).
41+
42+
---
43+
44+
## Common patterns
45+
46+
```dart
47+
// With spacing and center alignment
48+
ResponsiveRow(
49+
spacing: 16,
50+
mainAxisAlignment: .center,
51+
crossAxisAlignment: .center,
52+
children: [
53+
ResponsiveCol(xs: .col12, md: .col6, child: WidgetA()),
54+
ResponsiveCol(xs: .col12, md: .col6, child: WidgetB()),
55+
],
56+
)
57+
58+
// Dynamic list with builder
59+
ResponsiveRow.builder(
60+
spacing: 16,
61+
itemCount: items.length,
62+
itemBuilder: (index) => ResponsiveCol(
63+
xs: .col12,
64+
sm: .col6,
65+
lg: .col4,
66+
child: ItemCard(item: items[index]),
67+
),
68+
)
69+
```

0 commit comments

Comments
 (0)