refactor: improve skill to follow skills best practices#1
Open
Jaylonnet wants to merge 1 commit intoLeonxlnx:mainfrom
Open
refactor: improve skill to follow skills best practices#1Jaylonnet wants to merge 1 commit intoLeonxlnx:mainfrom
Jaylonnet wants to merge 1 commit intoLeonxlnx:mainfrom
Conversation
- Restructured SKILL.md for better clarity and focus - Added references/ directory with modular documentation: - architecture.md - creative-arsenal.md - design-rules.md - dials.md - motion.md - performance.md - Simplified skill description for better discoverability
Reviewer's GuideRefactors the frontend design skill into a concise entrypoint SKILL.md plus a modular references/ directory, separating architecture, motion, design rules, creative patterns, dials, and performance guardrails into focused reference documents while preserving the original guidance content. File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- Rule 3 in
references/design-rules.mdstill referencesLAYOUT_VARIANCE, but the only dial defined inreferences/dials.mdisDESIGN_VARIANCE; align the naming so the dial referenced in rules is actually defined. - Motion intensity behavior is described in both
references/motion.mdandreferences/dials.md; consider reducing duplication or clearly separating responsibilities (e.g., dials = conceptual levels, motion = implementation patterns) to avoid the two drifting out of sync. - The pre-flight checklist now appears in both
SKILL.mdandreferences/performance.md; consider consolidating into a single canonical checklist and linking to it to keep the source of truth clear.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Rule 3 in `references/design-rules.md` still references `LAYOUT_VARIANCE`, but the only dial defined in `references/dials.md` is `DESIGN_VARIANCE`; align the naming so the dial referenced in rules is actually defined.
- Motion intensity behavior is described in both `references/motion.md` and `references/dials.md`; consider reducing duplication or clearly separating responsibilities (e.g., dials = conceptual levels, motion = implementation patterns) to avoid the two drifting out of sync.
- The pre-flight checklist now appears in both `SKILL.md` and `references/performance.md`; consider consolidating into a single canonical checklist and linking to it to keep the source of truth clear.
## Individual Comments
### Comment 1
<location path="references/performance.md" line_range="4" />
<code_context>
+# Performance Guardrails
+
+## DOM Cost
+Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements:
+```css
+fixed inset-0 z-50 pointer-events-none
</code_context>
<issue_to_address>
**nitpick (typo):** Fix minor typo in `pointer-event-none` to match the intended `pointer-events-none` class name.
In the descriptive text above, update `pointer-event-none` to `pointer-events-none` to match the class used in the CSS example.
```suggestion
Apply grain/noise filters exclusively to fixed, pointer-events-none pseudo-elements:
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| # Performance Guardrails | ||
|
|
||
| ## DOM Cost | ||
| Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements: |
There was a problem hiding this comment.
nitpick (typo): Fix minor typo in pointer-event-none to match the intended pointer-events-none class name.
In the descriptive text above, update pointer-event-none to pointer-events-none to match the class used in the CSS example.
Suggested change
| Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements: | |
| Apply grain/noise filters exclusively to fixed, pointer-events-none pseudo-elements: |
📝 WalkthroughWalkthroughDocumentation restructured and expanded: SKILL.md condensed into a leaner specification, while six new reference files (architecture, creative arsenal, design rules, dials system, motion guidelines, and performance guardrails) provide comprehensive guidance on design patterns, system configuration, and technical constraints. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 7 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="references/performance.md">
<violation number="1" location="references/performance.md:4">
P3: Minor typo: `pointer-event-none` should be `pointer-events-none` to match the correct Tailwind CSS class name used in the code example below.</violation>
</file>
Since this is your first cubic review, here's how it works:
- cubic automatically reviews your code and comments on bugs and improvements
- Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
- Add one-off context when rerunning by tagging
@cubic-dev-aiwith guidance or docs links (includingllms.txt) - Ask questions if you need clarification on any suggestion
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| # Performance Guardrails | ||
|
|
||
| ## DOM Cost | ||
| Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements: |
There was a problem hiding this comment.
P3: Minor typo: pointer-event-none should be pointer-events-none to match the correct Tailwind CSS class name used in the code example below.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At references/performance.md, line 4:
<comment>Minor typo: `pointer-event-none` should be `pointer-events-none` to match the correct Tailwind CSS class name used in the code example below.</comment>
<file context>
@@ -0,0 +1,37 @@
+# Performance Guardrails
+
+## DOM Cost
+Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements:
+```css
+fixed inset-0 z-50 pointer-events-none
</file context>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@references/architecture.md`:
- Line 4: Update the phrase "Before importing ANY 3rd party library (e.g.
`framer-motion`, `lucide-react`, `zustand`), check `package.json`." to hyphenate
the compound modifier as "3rd-party" so it reads "Before importing ANY 3rd-party
library (e.g. `framer-motion`, `lucide-react`, `zustand`), check
`package.json`."—apply this change to the exact sentence beginning with "Before
importing ANY 3rd party library" in the document.
- Line 30: The guidance is incorrect: update the text to state to use exactly
the package names "@phosphor-icons/react" or "@radix-ui/react-icons", clarify
that "@radix-ui/react-icons" icons are primarily fill-based so "strokeWidth" has
little to no practical effect and should not be recommended, and for
"@phosphor-icons/react" replace any references to "strokeWidth" with the correct
prop "weight" and list accepted string values
("thin","light","regular","bold","fill","duotone"); ensure examples and any
global standardization guidance refer to "weight" for Phosphor and avoid
proposing a numeric "strokeWidth" for Radix.
In `@references/creative-arsenal.md`:
- Line 14: The table row string "Mac OS Dock Magnification" uses incorrect Apple
branding; update that label to "macOS Dock Magnification" (replace the literal
"Mac OS" with "macOS") wherever that exact string appears in the document so the
table header/cell reads "macOS Dock Magnification" and preserves the rest of the
row content unchanged.
In `@references/design-rules.md`:
- Around line 57-96: Update the five fenced code blocks in the "100 AI Tells"
section (e.g., the blocks starting with "NO Neon/Outer Glows:", "NO Inter
Font:", "NO Misaligned Elements:", "NO Generic Names:", and "NO Broken Unsplash
Links:") to include a language specifier by replacing the opening/closing triple
backticks with triple backticks plus "text" (i.e., change ``` to ```text for
each block) so the MD040 linter warning is resolved.
In `@references/performance.md`:
- Around line 5-7: The fenced code block currently uses the `css` language tag
but contains Tailwind utility classes ("fixed inset-0 z-50
pointer-events-none"); change the fence tag to `text` (or alternatively present
it as a JSX `className` snippet) so syntax highlighters treat it as plain
text/classes rather than CSS declarations—update the fenced block surrounding
"fixed inset-0 z-50 pointer-events-none" accordingly.
In `@SKILL.md`:
- Line 26: The grep pattern in the SKILL.md table uses BRE alternation with
backslash-escaped pipes ("grep "Grid\|Menu\|Card"
references/creative-arsenal.md"), which is not portable to macOS BSD grep;
update that entry to use extended regex mode (grep -E) and unescaped pipes
(Grid|Menu|Card) so the command works cross-platform and remains readable.
- Around line 12-14: The fenced code block containing "DESIGN_VARIANCE: 8 |
MOTION_INTENSITY: 6 | VISUAL_DENSITY: 4" in SKILL.md lacks a language specifier;
update the opening fence from ``` to ```text so the block becomes ```text ...
``` to satisfy MD040 and explicitly mark the content as plain text.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
SKILL.mdreferences/architecture.mdreferences/creative-arsenal.mdreferences/design-rules.mdreferences/dials.mdreferences/motion.mdreferences/performance.md
| # Architecture & Conventions | ||
|
|
||
| ## Dependency Verification [MANDATORY] | ||
| Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), check `package.json`. If missing, output the installation command before providing code. **Never** assume a library exists. |
There was a problem hiding this comment.
Minor grammar: hyphenate compound modifier "3rd-party"
✏️ Proposed fix
-Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), check `package.json`.
+Before importing ANY 3rd-party library (e.g. `framer-motion`, `lucide-react`, `zustand`), check `package.json`.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), check `package.json`. If missing, output the installation command before providing code. **Never** assume a library exists. | |
| Before importing ANY 3rd-party library (e.g. `framer-motion`, `lucide-react`, `zustand`), check `package.json`. If missing, output the installation command before providing code. **Never** assume a library exists. |
🧰 Tools
🪛 LanguageTool
[grammar] ~4-~4: Use a hyphen to join words.
Context: ...ion [MANDATORY] Before importing ANY 3rd party library (e.g. framer-motion, `lu...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@references/architecture.md` at line 4, Update the phrase "Before importing
ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), check
`package.json`." to hyphenate the compound modifier as "3rd-party" so it reads
"Before importing ANY 3rd-party library (e.g. `framer-motion`, `lucide-react`,
`zustand`), check `package.json`."—apply this change to the exact sentence
beginning with "Before importing ANY 3rd party library" in the document.
| - **Grid over Flex-Math:** NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`). | ||
|
|
||
| ## Icons | ||
| Use exactly `@phosphor-icons/react` or `@radix-ui/react-icons`. Standardize `strokeWidth` globally (e.g., `1.5` or `2.0`). |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, locate and read the file to see current guidance at line 30
find . -name "architecture.md" -type f | head -5Repository: Leonxlnx/taste-skill
Length of output: 92
🏁 Script executed:
# Once we find the file, let's read lines around line 30
git ls-files | grep -i architecture | head -10Repository: Leonxlnx/taste-skill
Length of output: 90
🌐 Web query:
@radix-ui/react-icons strokeWidth prop support API
💡 Result:
@radix-ui/react-icons doesn’t have a special strokeWidth API, but it does accept strokeWidth because every icon’s props are typed as:
IconProps extends React.SVGAttributes<SVGElement>(plus an optionalcolor) [1]
So this is valid TypeScript/React usage:
import { CheckIcon } from "@radix-ui/react-icons";
<CheckIcon strokeWidth={2} />;Whether it visually changes anything depends on the specific icon SVG: many Radix icons are primarily fill-based, so strokeWidth may have no effect unless the icon uses strokes. [1]
Sources:
[1] https://app.unpkg.com/%40radix-ui/react-icons%401.3.0/files/dist/types.d.ts
🌐 Web query:
@phosphor-icons/react weight prop documentation
💡 Result:
In @phosphor-icons/react, the weight prop controls the icon “style/weight” variant, and accepts:
"thin" | "light" | "regular" | "bold" | "fill" | "duotone".[1][2]
Example:
import { HeartIcon } from "@phosphor-icons/react";
<HeartIcon weight="fill" size={32} color="#AE2983" />You can also set a default weight for all icons via IconContext.Provider (value={{ weight: "bold" }}), which individual icons can override.[1][2]
Docs: GitHub README and npm package page.[1][2]
🏁 Script executed:
cat -n references/architecture.md | sed -n '25,35p'Repository: Leonxlnx/taste-skill
Length of output: 766
Inaccurate strokeWidth guidance for both icon libraries
The current guidance recommending strokeWidth with numeric values is incorrect for both libraries:
@radix-ui/react-icons: While the component technically acceptsstrokeWidthas an SVG attribute, most Radix icons are fill-based and will not respond visually to stroke width changes. The prop has little to no practical effect.@phosphor-icons/react: The correct prop isweight, notstrokeWidth, accepting string values ("thin","light","regular","bold","fill","duotone"), not numeric values like1.5or2.0.
This guidance would produce non-functional code. Update to reflect the actual APIs:
✏️ Proposed fix
-Use exactly `@phosphor-icons/react` or `@radix-ui/react-icons`. Standardize `strokeWidth` globally (e.g., `1.5` or `2.0`).
+Use exactly `@phosphor-icons/react` or `@radix-ui/react-icons`.
+- For `@phosphor-icons/react`: standardize the `weight` prop globally (e.g., `weight="light"` or `weight="regular"`).
+- For `@radix-ui/react-icons`: stroke width is fixed in the SVG source; visual customization via props is not supported.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| Use exactly `@phosphor-icons/react` or `@radix-ui/react-icons`. Standardize `strokeWidth` globally (e.g., `1.5` or `2.0`). | |
| Use exactly `@phosphor-icons/react` or `@radix-ui/react-icons`. | |
| - For `@phosphor-icons/react`: standardize the `weight` prop globally (e.g., `weight="light"` or `weight="regular"`). | |
| - For `@radix-ui/react-icons`: stroke width is fixed in the SVG source; visual customization via props is not supported. |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@references/architecture.md` at line 30, The guidance is incorrect: update the
text to state to use exactly the package names "@phosphor-icons/react" or
"@radix-ui/react-icons", clarify that "@radix-ui/react-icons" icons are
primarily fill-based so "strokeWidth" has little to no practical effect and
should not be recommended, and for "@phosphor-icons/react" replace any
references to "strokeWidth" with the correct prop "weight" and list accepted
string values ("thin","light","regular","bold","fill","duotone"); ensure
examples and any global standardization guidance refer to "weight" for Phosphor
and avoid proposing a numeric "strokeWidth" for Radix.
|
|
||
| | Pattern | Description | | ||
| |---------|-------------| | ||
| | **Mac OS Dock Magnification** | Nav-bar at the edge; icons scale fluidly on hover | |
There was a problem hiding this comment.
Correct Apple branding: "Mac OS" → "macOS"
✏️ Proposed fix
-| **Mac OS Dock Magnification** | Nav-bar at the edge; icons scale fluidly on hover |
+| **macOS Dock Magnification** | Nav-bar at the edge; icons scale fluidly on hover |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| | **Mac OS Dock Magnification** | Nav-bar at the edge; icons scale fluidly on hover | | |
| | **macOS Dock Magnification** | Nav-bar at the edge; icons scale fluidly on hover | |
🧰 Tools
🪛 LanguageTool
[uncategorized] ~14-~14: The operating system from Apple is written “macOS”
Context: ...ription | |---------|-------------| | Mac OS Dock Magnification | Nav-bar at the e...
(MAC_OS)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@references/creative-arsenal.md` at line 14, The table row string "Mac OS Dock
Magnification" uses incorrect Apple branding; update that label to "macOS Dock
Magnification" (replace the literal "Mac OS" with "macOS") wherever that exact
string appears in the document so the table header/cell reads "macOS Dock
Magnification" and preserves the rest of the row content unchanged.
Comment on lines
+57
to
+96
| ``` | ||
| NO Neon/Outer Glows: Do not use default box-shadow glows or auto-glows. Use inner borders or subtle tinted shadows. | ||
| NO Pure Black: Never use #000000. Use Off-Black, Zinc-950, or Charcoal. | ||
| NO Oversaturated Accents: Desaturate accents to blend elegantly with neutrals. | ||
| NO Excessive Gradient Text: Do not use text-fill gradients for large headers. | ||
| NO Custom Mouse Cursors: They are outdated and ruin performance/accessibility. | ||
| ``` | ||
|
|
||
| ## Typography | ||
|
|
||
| ``` | ||
| NO Inter Font: Banned. Use Geist, Outfit, Cabinet Grotesk, or Satoshi. | ||
| NO Oversized H1s: The first heading should not scream. Control hierarchy with weight and color, not just massive scale. | ||
| NO Serif on Dashboards: Use Serif fonts ONLY for creative/editorial designs. | ||
| ``` | ||
|
|
||
| ## Layout & Spacing | ||
|
|
||
| ``` | ||
| NO Misaligned Elements: Ensure padding and margins are mathematically perfect. | ||
| NO Floating Elements: Avoid awkward gaps. | ||
| NO 3-Column Card Layouts: The generic "3 equal cards horizontally" feature row is BANNED. Use 2-column Zig-Zag, asymmetric grid, or horizontal scrolling. | ||
| ``` | ||
|
|
||
| ## Content & Data (The "Jane Doe" Effect) | ||
|
|
||
| ``` | ||
| NO Generic Names: "John Doe", "Sarah Chan", "Jack Su" are banned. Use creative, realistic-sounding names. | ||
| NO Generic Avatars: DO NOT use standard SVG "egg" or Lucide user icons. Use creative, believable photo placeholders. | ||
| NO Fake Numbers: Avoid 99.99%, 50%, or 1234567. Use organic, messy data (47.2%, +1 (312) 847-1928). | ||
| NO Startup Slop Names: "Acme", "Nexus", "SmartFlow". Invent premium, contextual brand names. | ||
| NO Filler Words: Avoid "Elevate", "Seamless", "Unleash", "Next-Gen". Use concrete verbs. | ||
| ``` | ||
|
|
||
| ## External Resources & Components | ||
|
|
||
| ``` | ||
| NO Broken Unsplash Links: Do not use Unsplash. Use https://picsum.photos/seed/{random_string}/800/600 or SVG UI Avatars. | ||
| NO Default shadcn/ui: You may use shadcn/ui, but NEVER in generic default state. Customize radii, colors, shadows. | ||
| ``` |
There was a problem hiding this comment.
Add language specifiers to fenced code blocks (MD040)
All five rule-list code blocks in the "100 AI Tells" section use bare ``` without a language tag, triggering the MD040 linter warning. Use ```text since the content is plain-text rules.
✏️ Proposed fix (apply to all five blocks)
-```
NO Neon/Outer Glows: ...
-```
+```text
NO Neon/Outer Glows: ...
+```🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@references/design-rules.md` around lines 57 - 96, Update the five fenced code
blocks in the "100 AI Tells" section (e.g., the blocks starting with "NO
Neon/Outer Glows:", "NO Inter Font:", "NO Misaligned Elements:", "NO Generic
Names:", and "NO Broken Unsplash Links:") to include a language specifier by
replacing the opening/closing triple backticks with triple backticks plus "text"
(i.e., change ``` to ```text for each block) so the MD040 linter warning is
resolved.
Comment on lines
+5
to
+7
| ```css | ||
| fixed inset-0 z-50 pointer-events-none | ||
| ``` |
There was a problem hiding this comment.
Misleading css language tag — content is a Tailwind class string, not CSS
The fenced block contains Tailwind utility class names, not CSS declarations. Syntax highlighters will misparse this as CSS. Use text (or wrap in a JSX className snippet for context).
✏️ Proposed fix
-```css
-fixed inset-0 z-50 pointer-events-none
-```
+```text
+fixed inset-0 z-50 pointer-events-none
+```📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| ```css | |
| fixed inset-0 z-50 pointer-events-none | |
| ``` |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@references/performance.md` around lines 5 - 7, The fenced code block
currently uses the `css` language tag but contains Tailwind utility classes
("fixed inset-0 z-50 pointer-events-none"); change the fence tag to `text` (or
alternatively present it as a JSX `className` snippet) so syntax highlighters
treat it as plain text/classes rather than CSS declarations—update the fenced
block surrounding "fixed inset-0 z-50 pointer-events-none" accordingly.
Comment on lines
+12
to
+14
| ``` | ||
| DESIGN_VARIANCE: 8 | MOTION_INTENSITY: 6 | VISUAL_DENSITY: 4 | ||
| ``` |
There was a problem hiding this comment.
Add language specifier to fenced code block (MD040)
✏️ Proposed fix
-```
+```text
DESIGN_VARIANCE: 8 | MOTION_INTENSITY: 6 | VISUAL_DENSITY: 4🧰 Tools
🪛 markdownlint-cli2 (0.21.0)
[warning] 12-12: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@SKILL.md` around lines 12 - 14, The fenced code block containing
"DESIGN_VARIANCE: 8 | MOTION_INTENSITY: 6 | VISUAL_DENSITY: 4" in SKILL.md lacks
a language specifier; update the opening fence from ``` to ```text so the block
becomes ```text ... ``` to satisfy MD040 and explicitly mark the content as
plain text.
| | Design Rules | `references/design-rules.md` | `grep "NO " references/design-rules.md` | | ||
| | Motion/Animation | `references/motion.md` | `grep "spring" references/motion.md` | | ||
| | Performance | `references/performance.md` | `grep "NEVER" references/performance.md` | | ||
| | Creative Arsenal | `references/creative-arsenal.md` | `grep "Grid\|Menu\|Card" references/creative-arsenal.md` | |
There was a problem hiding this comment.
\| BRE alternation is not portable to macOS BSD grep
grep "Grid\|Menu\|Card" works on GNU grep (Linux) but fails silently on macOS BSD grep. Use -E with unescaped | for cross-platform compatibility.
✏️ Proposed fix
-| Creative Arsenal | `references/creative-arsenal.md` | `grep "Grid\|Menu\|Card" references/creative-arsenal.md` |
+| Creative Arsenal | `references/creative-arsenal.md` | `grep -E "Grid|Menu|Card" references/creative-arsenal.md` |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| | Creative Arsenal | `references/creative-arsenal.md` | `grep "Grid\|Menu\|Card" references/creative-arsenal.md` | | |
| | Creative Arsenal | `references/creative-arsenal.md` | `grep -E "Grid|Menu|Card" references/creative-arsenal.md` | |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@SKILL.md` at line 26, The grep pattern in the SKILL.md table uses BRE
alternation with backslash-escaped pipes ("grep "Grid\|Menu\|Card"
references/creative-arsenal.md"), which is not portable to macOS BSD grep;
update that entry to use extended regex mode (grep -E) and unescaped pipes
(Grid|Menu|Card) so the command works cross-platform and remains readable.
NDilanka
pushed a commit
to NDilanka/taste-skill
that referenced
this pull request
Mar 19, 2026
Follows Anthropic's Leonxlnx#1 skill development recommendation: evaluation-driven development. - reference/EVALUATIONS.md: 8 test scenarios spanning all archetypes (Abstract Mark, Wordmark, Geometric Monogram, Pictorial Reduction, Combination Mark, Negative Space, Emblem, Revision Round) with expected archetype selection, quality signals, and common failure modes - scripts/validate-svg.sh: automated validation checking banned elements, accessibility attributes, viewBox, coordinate precision, path closure, file size, shape count, unused defs, editor metadata - SKILL.md step 9 now references the validation script https://claude.ai/code/session_01TybV7LMWVrnzVqtUqwoUvM
Leonxlnx
force-pushed
the
main
branch
2 times, most recently
from
bba36d6 to
90d6ec7
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by Sourcery
Restructure the frontend design skill documentation into a concise entrypoint with modular reference files for architecture, design rules, motion, performance, creative patterns, and control dials.
Documentation:
Summary by cubic
Refactored the frontend design skill into a concise SKILL.md entrypoint with modular reference docs to improve clarity, discoverability, and consistent best practices for React/Next.js UI work.
Written for commit 45a1145. Summary will update on new commits.
Summary by CodeRabbit
Documentation