Skip to main content

Frontend Development References

CAPaaS - Coditect Agentic Platform as a Service Copyright 2026 AZ1.AI Inc. All Rights Reserved

Version: 1.0.0 Last Updated: 2026-01-19

Table of Contents​

  1. Atomic Design & Design Systems
  2. Component Libraries & Frameworks
  3. Design Tokens & Theming
  4. Storybook & Documentation
  5. Accessibility (WCAG)
  6. Testing & Quality
  7. Performance & Optimization
  8. UI Inventory & Audit Tools

Atomic Design & Design Systems​

Foundational Resources​

ResourceDescriptionURL
Atomic Design by Brad FrostThe original methodology bookatomicdesign.bradfrost.com
Atomic Design Methodology - MediumPractical implementation guideblog.kamathrohan.com
Mastering Atomic Design - DEVBuilding efficient design systemsdev.to/brdnicolas
Atomic Design for DevelopersComponent composition guidebenjaminwfox.com
Scalable Frontend ArchitectureAtomic Design + Feature Slicescodewithseb.com

Design System Collections​

ResourceDescriptionURL
Design Systems RepoCollection of design system resourcesdesignsystemsrepo.com
Awesome UI Component LibraryCurated list of component librariesgithub.com/anubhavsrivastava

Component Libraries & Frameworks​

React Component Libraries (2026)​

LibraryBest ForURL
MUI (Material UI)Enterprise dashboards, Google Material Designmui.com
Ant DesignEnterprise apps, Chinese ecosystemant.design
shadcn/uiFull control, copy-paste componentsui.shadcn.com
Radix UIUnstyled, accessible primitivesradix-ui.com
Chakra UIAccessible, themeable componentschakra-ui.com
PrimeReactLargest collection, data-heavy appsprimereact.org
VaadinEnterprise-grade, deep accessibilityvaadin.com
Adobe SpectrumBrand consistency, cross-platformspectrum.adobe.com

Reference Articles​

ResourceDescriptionURL
15 Best React UI Libraries 2026Comprehensive comparisonbuilder.io
14 Best React UI Component LibrariesAlternatives to MUI & Shadcnuntitledui.com
10 Best React UI Component LibrariesDetailed reviewsthefrontendcompany.com
23 Best React Component LibrariesFull feature comparisontechnostacks.com
Top 12 UI Component Libraries JSJavaScript ecosystemjavaH.P.004-SCRIPTS.shop

Design Tokens & Theming​

Standards & Specifications​

ResourceDescriptionURL
Design Tokens W3C DraftW3C Community Group specificationdesign-tokens.github.io
Style DictionaryBuild system for design tokensamzn.github.io/style-dictionary
Tokens StudioFigma plugin for design tokenstokens.studio

Implementation Guides​

ResourceDescriptionURL
CSS Custom Properties GuideMDN comprehensive guidedeveloper.mozilla.org
Design Tokens in PracticeReal-world implementationcss-tricks.com

Storybook & Documentation​

Official Resources​

ResourceDescriptionURL
Storybook OfficialComponent development environmentstorybook.js.org
Storybook TutorialsStep-by-step guidesstorybook.js.org/tutorials
ChromaticVisual testing for Storybookchromatic.com

Implementation Guides​

ResourceDescriptionURL
Building Component Library with StorybookReact + TypeScript + Storybookmedium.com/simform
React Component Library with RollupComplete setup guidemedium.com/@toukirraju
Engineer's Guide to React Component Library2025 best practicesdronahq.com
Choosing Storybook 10Component documentationconzit.com

Accessibility (WCAG)​

Standards & Guidelines​

ResourceDescriptionURL
WCAG 2.1 GuidelinesW3C accessibility standardw3.org/WAI/WCAG21
WAI-ARIA Authoring PracticesComponent patternsw3.org/WAI/ARIA
A11Y ProjectCommunity-driven accessibilitya11yproject.com

Testing Tools​

ResourceDescriptionURL
axe DevToolsAccessibility testingdeque.com/axe
WAVEWeb accessibility evaluationwave.webaim.org
LighthouseGoogle accessibility auditdevelopers.google.com/web/tools/lighthouse

Testing & Quality​

Testing Frameworks​

ResourceDescriptionURL
JestJavaScript testing frameworkjestjs.io
React Testing LibraryReact component testingtesting-library.com/react
PlaywrightEnd-to-end testingplaywright.dev
CypressComponent & E2E testingcypress.io

Visual Regression Testing​

ResourceDescriptionURL
ChromaticStorybook visual testingchromatic.com
PercyVisual testing platformpercy.io
ApplitoolsAI-powered visual testingapplitools.com

Performance & Optimization​

Core Web Vitals​

ResourceDescriptionURL
Web VitalsGoogle's performance metricsweb.dev/vitals
PageSpeed InsightsPerformance analysispagespeed.web.dev
Lighthouse CIAutomated performancegithub.com/GoogleChrome/lighthouse-ci

Bundle Optimization​

ResourceDescriptionURL
BundlephobiaPackage size analysisbundlephobia.com
Webpack Bundle AnalyzerVisualize bundle contentgithub.com/webpack-contrib

UI Inventory & Audit Tools​

Inventory Process​

ResourceDescriptionURL
Creating UI InventoryUXPin comprehensive guideuxpin.com
UI Component Library ChecklistEssential elementsuxpin.com/studio
Design System ChecklistLaunch checklistuxpin.com/studio
Atomic Design System ChecklistComponent checklistuxpin.com/studio

Audit Tools​

ToolDescriptionURL
CSS StatsCSS analyticscssstats.com
Project WallaceCSS analysisprojectwallace.com
FigmaDesign audit in Figmafigma.com

CODITECT-Specific Resources​

Internal Standards​

DocumentPurposePath
CODITECT-STANDARD-UI-UX.mdMaster UI/UX standardF.V.010-STANDARDS-CORE/CODITECT-STANDARD-UI-UX.md
CODITECT-STANDARD-COMPONENT-LIBRARY.mdAtomic design methodologyF.V.010-STANDARDS-CORE/CODITECT-STANDARD-COMPONENT-LIBRARY.md
CODITECT-STANDARD-DESIGN-TOKENS.mdCSS variables, themingF.V.010-STANDARDS-CORE/CODITECT-STANDARD-DESIGN-TOKENS.md
CODITECT-STANDARD-ACCESSIBILITY.mdWCAG 2.1 AA complianceF.V.010-STANDARDS-CORE/CODITECT-STANDARD-ACCESSIBILITY.md

ADRs​

DocumentPurposePath
ADR-084MoE UI Agent Architectureinternal/architecture/adrs/ADR-084-moe-ui-agent-architecture.md
ADR-085Atomic Design Component Libraryinternal/architecture/adrs/ADR-085-atomic-design-component-library.md
ADR-086AG-UI Event Protocolinternal/architecture/adrs/ADR-086-ag-ui-event-protocol-integration.md
ADR-087HITL Approval Workflowinternal/architecture/adrs/ADR-087-hitl-approval-workflow-ui-changes.md

Proto-Code Templates​

LocationContents
H.P.008-TEMPLATES/ui-components/atoms/13 atom components
H.P.008-TEMPLATES/ui-components/molecules/11 molecule components
H.P.008-TEMPLATES/ui-components/organisms/9 organism components
H.P.008-TEMPLATES/ui-components/H.P.008-TEMPLATES/6 template components
H.P.008-TEMPLATES/ui-components/tokens.cssDesign token definitions

Key Takeaways (2026 Best Practices)​

Component Library Requirements​

  1. TypeScript - Strong typing for props and exports
  2. Design Tokens - CSS variables as single source of truth
  3. WCAG 2.1 AA - First-class accessibility
  4. Dark Mode - Light/dark theme support
  5. SSR Compatible - Server-side rendering support
  6. Tree-Shakeable - Only import what you use
LayerTechnology
FrameworkReact 19
LanguageTypeScript 5.6
BuildVite 5 or Rollup
StylingCSS Modules + Design Tokens
DocumentationStorybook 10
TestingJest + RTL + Playwright
Visual TestingChromatic

Inventory Process​

  1. Screenshot Audit - Capture every UI element
  2. Categorize - Group by type (buttons, inputs, etc.)
  3. Identify Inconsistencies - Note variations
  4. Standardize - Create unified patterns
  5. Document - Build Storybook stories
  6. Govern - Establish contribution rules

Maintained by: AZ1.AI Inc. Version: 1.0.0 Last Updated: 2026-01-19