Skip to main content
Deno 2 is finally here 🎉️
Learn more

FrontmatterVersion: 1 DocumentType: Guide Title: Fathym Atomic Design Kit Summary: Base atomic library designed to compose into domain-specific component libraries. Created: 2025-11-20 Updated: 2025-11-20 Owners: - fathym References: - Label: Projects: Ref-Arch README Path: ../README.md - Label: Projects: Ref-Arch AGENTS Path: ../AGENTS.md - Label: Projects: Ref-Arch GUIDE Path: ../GUIDE.md - Label: Workspace README Path: ../../README.md - Label: Workspace AGENTS Path: ../../AGENTS.md - Label: Workspace GUIDE Path: ../../WORKSPACE_GUIDE.md - Label: Project AGENTS Path: ./AGENTS.md - Label: Project GUIDE Path: ./GUIDE.md

Fathym Atomic Design Kit

Base atomic library designed to compose into domain-specific component libraries, following Brad Frost’s Atomic Design principles (atoms → molecules → organisms → templates).

  • Goal: deliver modular, reusable UI building blocks that can be assembled into higher-level component libraries.
  • Outputs: atoms, molecules, organisms, templates, and utilities under src/.
  • Code location: this folder hosts the source and build scripts.

Atomic Components

  • src/atoms: basic building blocks.
  • src/molecules: composed from atoms.
  • src/organisms: composed from molecules/atoms.
  • src/templates: layout templates for consistent structures.
  • src/utils: utilities shared across components.

Current Status

  • Tasks: deno task test, deno task build (fmt + lint + publish check + tests), deno task build:tailwind, deno task npm:build/publish, deno task deploy, deno task version.
  • JSX/Preact configured; Tailwind config generation via build:tailwind.

How to Work in This Pod

  1. Read parent ref-arch docs and this project’s AGENTS and GUIDE.
  2. Declare intent before editing; summarize outcomes and open questions in a short log or this README.
  3. Keep component APIs and styles stable; document breaking changes and update consumers.
  4. Capture provenance and release channels in UPSTREAM.md when publishing to jsr/npm.
  5. Keep links relative; avoid embedding secrets or licensed assets without proper handling.