Skip to content

PRODUCT.md

Latest commit

 

History

History
45 lines (27 loc) · 3.29 KB

PRODUCT.md

File metadata and controls

45 lines (27 loc) · 3.29 KB
Raw

Product

Register

brand

Users

Frontend developers building AI agent experiences in React. They arrive with a specific interaction problem — streaming output, reasoning visibility, action confirmation, tool-call feedback, or multi-step progress — and need a working reference they can copy into their own codebase without adopting a full design system or chat UI framework.

Their context is implementation: they're mid-build, comparing approaches, and want to see the pattern behave before they commit to it.

Product Purpose

agentic-kit.dev is the live implementation companion to agentic-ux.com. The spec site describes what each agent interaction pattern is and why it matters; agentic-kit.dev shows how — with interactive demos and copy-paste React components for each pattern.

Success looks like becoming the default reference library for agent UI patterns while staying tightly coupled to the agentic-ux spec catalog. A developer should land, play with a pattern, copy the code, and ship it the same day.

Brand Personality

Craft-forward. Opinionated. Exemplary.

The site doesn't just document patterns — it demonstrates what great agent UI looks like. Voice is confident and precise, never hype-driven. Every surface should feel product-grade: dark, refined, intentional. The playground itself is a proof of concept for the quality bar the patterns teach.

Emotional goal: trust through craft. Developers should feel they're learning from someone who has already solved this well.

Anti-references

  • Generic AI SaaS landing pages — cream backgrounds, gradient text, hero metrics, eyebrow kickers on every section. This is a reference library, not a startup pitch.
  • ChatGPT-clone UIs — message bubbles, generic sidebars, indistinguishable chat shells. Patterns here are composable primitives, not a full chat app template.
  • Over-animated agent demos — glassmorphism, excessive glow, bounce/elastic motion, flashy for flashiness' sake. Motion serves comprehension, not spectacle.

Design Principles

  1. Practice what you preach — The showcase site should embody the same interaction quality the patterns teach. If we recommend progressive disclosure for reasoning states, the site uses it too.
  2. Show, don't tell — Live demos are the primary teaching surface. Copy and specs support the demo; they don't replace it.
  3. Copy-paste ready — Every pattern ships as self-contained code with no hidden dependencies. If it doesn't run in a bare React project, it doesn't ship.
  4. Companion, not competitor — agentic-kit.dev extends agentic-ux.com; every pattern links back to its spec. The two sites form one mental model for practitioners.
  5. Opinionated defaults — We show one well-considered way to solve each interaction, not a buffet of mediocre options. Confidence over comprehensiveness.

Accessibility & Inclusion

  • WCAG 2.1 AA as the baseline for the site shell and all pattern demos.
  • Contrast, focus states, and keyboard operability are non-negotiable — especially for confirm flows, slide-out panels, and interactive progress indicators.
  • Reduced-motion support is already in place for the site; new patterns must respect prefers-reduced-motion with meaningful fallbacks (instant state changes, not broken animations).