Skip to content

Commit fc9e4c0

Browse files
lee-chaselee-chase
committed
feat: more mode updates
1 parent 02ff605 commit fc9e4c0

File tree

8 files changed

+1972
-43
lines changed

8 files changed

+1972
-43
lines changed

‎.bob/rules-carbon-figma-to-react-upd/1_carbon_essentials.xml‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -460,6 +460,105 @@ import { Layer } from '@carbon/react';
460460
</steps>
461461
</component_discovery>
462462

463+
<project_specific_patterns priority="medium">
464+
<title>Project-Specific Component Recognition</title>
465+
<description>
466+
When analyzing designs, check for existing project-specific implementations
467+
of common patterns like global headers, navigation, or footers.
468+
</description>
469+
470+
<global_header_recognition>
471+
<title>Global Header Recognition</title>
472+
<description>
473+
Many projects have a reusable global header component. When analyzing
474+
designs with global headers, check if the project already has an
475+
implementation before creating a new one.
476+
</description>
477+
<detection_workflow>
478+
<step number="1">
479+
<action>Check for existing header components</action>
480+
<guidance>
481+
<point>Use search_files to find header-related components</point>
482+
<point>Look for files like CommonHeader, GlobalHeader, AppHeader</point>
483+
<point>Check in common locations: src/components/, src/layouts/</point>
484+
</guidance>
485+
<example><![CDATA[
486+
<search_files>
487+
<path>src</path>
488+
<regex>(CommonHeader|GlobalHeader|AppHeader|Header)</regex>
489+
<file_pattern>*.jsx</file_pattern>
490+
</search_files>
491+
]]> </example>
492+
</step>
493+
<step number="2">
494+
<action>Read the component source if found</action>
495+
<guidance>
496+
<point>Use read_file to examine the existing implementation</point>
497+
<point>Document the component's location and usage</point>
498+
<point>Note any props or customization options</point>
499+
</guidance>
500+
<example><![CDATA[
501+
<read_file>
502+
<args>
503+
<file>
504+
<path>src/components/commonHeader/CommonHeader.jsx</path>
505+
</file>
506+
</args>
507+
</read_file>
508+
]]> </example>
509+
</step>
510+
<step number="3">
511+
<action>Note in assessment and focus on page-specific content</action>
512+
<guidance>
513+
<point>Acknowledge the existing global header in your assessment</point>
514+
<point>Focus analysis on page-specific content below the header</point>
515+
<point>Don't duplicate or recreate the global header</point>
516+
</guidance>
517+
<example_note><![CDATA[
518+
## Global Header
519+
This project uses CommonHeader at `src/components/commonHeader/CommonHeader.jsx`
520+
for the global header. The analysis below focuses on page-specific content.
521+
]]> </example_note>
522+
</step>
523+
</detection_workflow>
524+
<common_locations>
525+
<location>src/components/commonHeader/</location>
526+
<location>src/components/header/</location>
527+
<location>src/layouts/</location>
528+
<location>src/components/navigation/</location>
529+
</common_locations>
530+
<benefits>
531+
<benefit>Avoids duplicating existing functionality</benefit>
532+
<benefit>Maintains consistency across the application</benefit>
533+
<benefit>Focuses implementation effort on new features</benefit>
534+
<benefit>Respects established project patterns</benefit>
535+
</benefits>
536+
</global_header_recognition>
537+
538+
<other_common_patterns>
539+
<pattern name="Footer">
540+
<description>Check for existing Footer components</description>
541+
<common_names>Footer, CommonFooter, AppFooter</common_names>
542+
</pattern>
543+
<pattern name="Navigation">
544+
<description>Check for existing Nav or Sidebar components</description>
545+
<common_names>Nav, Navigation, Sidebar, SideNav</common_names>
546+
</pattern>
547+
<pattern name="Layout Wrappers">
548+
<description>Check for page layout components</description>
549+
<common_names>PageLayout, Layout, AppLayout, MainLayout</common_names>
550+
</pattern>
551+
</other_common_patterns>
552+
553+
<integration_principle>
554+
<title>Respect Existing Patterns</title>
555+
<description>
556+
Always check for and use existing project-specific components before
557+
creating new ones. This maintains consistency and reduces duplication.
558+
</description>
559+
</integration_principle>
560+
</project_specific_patterns>
561+
463562
<quick_reference>
464563
<title>Quick Reference</title>
465564
<common_patterns>

‎.bob/rules-carbon-figma-to-react-upd/2_working_practices.xml‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,115 @@ import './my-component.scss';
275275
}
276276
]]> </example>
277277
</responsive_styling>
278+
279+
<token_enforcement priority="critical">
280+
<title>Carbon Token Usage for All Styling</title>
281+
<description>
282+
Carbon tokens, mixins, and functions should be used for ALL styling properties,
283+
not just specific cases. This ensures theme compatibility, consistency, and
284+
maintainability across the entire application.
285+
</description>
286+
<enforcement>
287+
<tool>stylelint-plugin-carbon-tokens</tool>
288+
<description>
289+
This stylelint plugin enforces the use of Carbon tokens throughout your
290+
stylesheets, catching hardcoded values and suggesting appropriate tokens.
291+
</description>
292+
</enforcement>
293+
<comprehensive_token_usage>
294+
<category name="Colors">
295+
<rule>Use theme tokens ($text-primary, $layer, $border-subtle, etc.) for all colors</rule>
296+
<example><![CDATA[
297+
// CORRECT: Using theme tokens
298+
.component {
299+
color: $text-primary;
300+
background-color: $layer;
301+
border-color: $border-subtle;
302+
}
303+
304+
// INCORRECT: Hardcoded colors
305+
.component {
306+
color: #161616; // ❌ Use $text-primary
307+
background-color: #f4f4f4; // ❌ Use $layer
308+
border-color: #e0e0e0; // ❌ Use $border-subtle
309+
}
310+
]]> </example>
311+
</category>
312+
<category name="Spacing">
313+
<rule>Use spacing tokens ($spacing-03, $spacing-05, etc.) for all spacing</rule>
314+
<example><![CDATA[
315+
// CORRECT: Using spacing tokens
316+
.component {
317+
padding: $spacing-05;
318+
margin-bottom: $spacing-06;
319+
gap: $spacing-03;
320+
}
321+
322+
// INCORRECT: Hardcoded spacing
323+
.component {
324+
padding: 16px; // ❌ Use $spacing-05
325+
margin-bottom: 24px; // ❌ Use $spacing-06
326+
gap: 8px; // ❌ Use $spacing-03
327+
}
328+
]]> </example>
329+
</category>
330+
<category name="Typography">
331+
<rule>Use type mixins (@include type-style()) for all typography</rule>
332+
<example><![CDATA[
333+
// CORRECT: Using type mixins
334+
.heading {
335+
@include type-style('heading-03');
336+
}
337+
338+
.body-text {
339+
@include type-style('body-long-01');
340+
}
341+
342+
// INCORRECT: Manual font declarations
343+
.heading {
344+
font-size: 20px; // ❌ Use type-style mixin
345+
line-height: 26px; // ❌ Use type-style mixin
346+
font-weight: 600; // ❌ Use type-style mixin
347+
}
348+
]]> </example>
349+
</category>
350+
<category name="Gradients">
351+
<rule>Use Carbon tokens in gradients for theme compatibility</rule>
352+
<example><![CDATA[
353+
// CORRECT: Tokens in gradients
354+
.section {
355+
background: linear-gradient(to bottom, $layer, $layer-accent);
356+
}
357+
358+
// INCORRECT: Hardcoded gradient colors
359+
.section {
360+
background: linear-gradient(to bottom, #f4f4f4, #e0e0e0); // ❌ Use tokens
361+
}
362+
]]> </example>
363+
</category>
364+
<category name="Motion">
365+
<rule>Use motion tokens and functions for animations and transitions</rule>
366+
<example><![CDATA[
367+
// CORRECT: Using motion tokens
368+
.component {
369+
transition: opacity motion(standard, productive);
370+
}
371+
372+
// INCORRECT: Hardcoded timing
373+
.component {
374+
transition: opacity 0.3s ease-in-out; // ❌ Use motion tokens
375+
}
376+
]]> </example>
377+
</category>
378+
</comprehensive_token_usage>
379+
<benefits>
380+
<benefit>Automatic theme adaptation across all themes (white, g10, g90, g100)</benefit>
381+
<benefit>Consistent spacing and typography throughout the application</benefit>
382+
<benefit>Easier maintenance when design system updates</benefit>
383+
<benefit>Enforced by tooling (stylelint-plugin-carbon-tokens)</benefit>
384+
<benefit>Better accessibility through tested token values</benefit>
385+
</benefits>
386+
</token_enforcement>
278387
</styling_guidelines>
279388

280389
<troubleshooting priority="high">

0 commit comments

Comments
 (0)