{"id":"7ff94ec0-17da-458c-a436-d321ca5147cd","entityType":"agent","slug":"vandriesh-react-gradual-architecture-2","name":"react-gradual-architecture","canonicalUrl":"https://www.xpersona.co/agent/vandriesh-react-gradual-architecture-2","canonicalPath":"/agent/vandriesh-react-gradual-architecture-2","generatedAt":"2026-10-09T09:38:00.591Z","source":"GITHUB_OPENCLEW","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-04-15T05:21:22.124Z","emptyReason":null},"description":"Incremental React code organization guidelines. Start small, then extract when scanning and responsibilities start to blur. Use when creating features, organizing files, refactoring components, or deciding when to extract hooks, UI, or utils. --- name: react-gradual-architecture description: Incremental React code organization guidelines. Start small, then extract when scanning and responsibilities start to blur. Use when creating features, organizing files, refactoring components, or deciding when to extract hooks, UI, or utils. license: MIT compatibility: Works with React. metadata: version: 1.0.0 author: vandriesh categories: [react, architecture, orga","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. Last updated 4/15/2026.","installCommand":"git clone https://github.com/vandriesh/react-gradual-architecture.git","sourceUrl":"https://github.com/vandriesh/react-gradual-architecture","homepage":null,"primaryLinks":[{"label":"View Source","url":"https://github.com/vandriesh/react-gradual-architecture","kind":"source"}],"safetyScore":94,"overallRank":28.7,"popularityScore":0,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Incremental React code organization guidelines. Start small, then extract when scanning and responsibilities start to blur. Use when creating features, organizi"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-04-15T05:21:22.124Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"no-adoption-signals","verified":false,"confidence":"low","updatedAt":"2026-04-15T05:21:22.124Z","emptyReason":"No source adoption metrics were available."},"stars":0,"forks":0,"downloads":null,"packageName":null,"latestVersion":null,"tractionLabel":null},"release":{"evidence":{"source":"agent-index","verified":false,"confidence":"medium","updatedAt":"2026-04-15T03:15:04.767Z","emptyReason":null},"lastUpdatedAt":"2026-04-15T05:21:22.124Z","lastCrawledAt":"2026-04-15T03:15:04.767Z","lastIndexedAt":null,"nextCrawlAt":"2026-04-16T03:15:04.767Z","lastVerifiedAt":null,"highlights":[]},"execution":{"evidence":{"source":"GITHUB OPENCLEW","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"git clone https://github.com/vandriesh/react-gradual-architecture.git","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/vandriesh-react-gradual-architecture-2/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/vandriesh-react-gradual-architecture-2/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/vandriesh-react-gradual-architecture-2/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/vandriesh-react-gradual-architecture-2/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/vandriesh-react-gradual-architecture-2/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/vandriesh-react-gradual-architecture-2/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"GITHUB_OPENCLEW","generatedAt":"2026-10-09T09:38:00.591Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/vandriesh-react-gradual-architecture-2/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/vandriesh-react-gradual-architecture-2/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/vandriesh-react-gradual-architecture-2/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/vandriesh-react-gradual-architecture-2/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"GITHUB OPENCLEW","verified":false,"confidence":"high","updatedAt":"2026-04-15T05:21:22.124Z","emptyReason":null},"readme":"---\nname: react-gradual-architecture\ndescription: Incremental React code organization guidelines. Start small, then extract when scanning and responsibilities start to blur. Use when creating features, organizing files, refactoring components, or deciding when to extract hooks, UI, or utils.\nlicense: MIT\ncompatibility: Works with React.\nmetadata:\n  version: 1.0.0\n  author: vandriesh\n  categories: [react, architecture, organization, best-practices]\n---\n\n# React Gradual Architecture\n\nLightweight guidance for organizing React code without over-structuring. The core idea: start small, minimum necessary (one file), extract only when it improves clarity or reuse. Contains 12 rules across 5 categories, prioritized by when to apply them in the development lifecycle.\n\n## When to Use This Skill\n\nReference these guidelines when:\n\n- Creating new React features or components\n- Organizing component files and folders\n- Refactoring a growing component\n- Deciding when to extract hooks, UI, or utils\n- Structuring feature directories and shared code\n- Creating feature documentation (README.md)\n\n## Rule Categories by Priority\n\n| Priority | Category | When to Apply | Prefix |\n|----------|----------|---------------|--------|\n| 1 | Foundation | Before starting any feature | `framework-` |\n| 2 | Starting | When beginning a new feature | `start-` |\n| 3 | Organization & Structure | When organizing files and folders | `organize-` |\n| 4 | Extraction | When refactoring or extracting code | `extract-` |\n| 5 | Data & State | When managing types and state | `data-`, `state-` |\n\n## Quick Reference\n\n### 1. Foundation (CRITICAL)\n\n- `framework-conventions` - Follow framework conventions and keep domain code framework-agnostic\n- `framework-react-router` - Use `.server` suffix for server-only code (React Router / Remix)\n\n### 2. Starting (CRITICAL)\n\n- `start-small` - Begin features in a single file;\n- if a file has more that 100 lines of code proceed with organization and extractions accordingly.\n- `component-composition` - Prefer composition over configuration; use children instead of many props (exception: variant props)\n\n\n### 3. Organization & Structure\n\n- `organize-features-folder` - Place features under `src/features/<feature>/` or `app/features/<feature>/`\n- `organize-locality` - Keep related files close to the feature\n- `organize-reuse-boundaries` - Wait for the second use before extracting shared code\n- `organize-feature-readme` - Create README.md for each feature documenting structure and specifications\n\n\n### 4. Extraction\n\n- `extract-scrolling` - Extract when scanning becomes difficult\n- `extract-to-share` - Use hooks for React logic, plain functions for everything else\n- `extract-ui-logic-utils` - Extract UI, logic, and utils when concerns diverge\n- `extract-container-presentational` - Extract container (data) from presentational (UI) components\n\n### 5. Data & State\n\n- `data-types-placement` - Define types where the data is born. **NEVER create separate `types.ts` files**\n- `state-placement` - Keep state local; lift only as high as needed\n\n## Rules Reference\n\nThe guidelines are organized into focused rule files. Reference the specific rules when making architectural decisions:\n\n### Foundation\n- [`framework-conventions.md`](rules/framework-conventions.md) - Follow framework conventions and keep domain code framework-agnostic\n- [`framework-react-router.md`](rules/framework-react-router.md) - Use `.server` suffix for server-only code (React Router / Remix)\n\n### Starting\n- [`start-small.md`](rules/start-small.md) - Begin features in a single file\n- [`component-composition.md`](rules/component-composition.md) - Prefer composition over configuration; use children instead of many props\n\n### Organization & Structure\n- [`organize-features-folder.md`](rules/organize-features-folder.md) - Place features under `src/features/<feature>/` or `app/features/<feature>/`\n- [`organize-locality.md`](rules/organize-locality.md) - Keep related files close to the feature\n- [`organize-reuse-boundaries.md`](rules/organize-reuse-boundaries.md) - Wait for the second use before extracting shared code\n- [`organize-feature-readme.md`](rules/organize-feature-readme.md) - Create README.md for each feature documenting structure and specifications\n\n### Extraction\n- [`extract-scrolling.md`](rules/extract-scrolling.md) - Extract when scanning becomes difficult\n- [`extract-to-share.md`](rules/extract-to-share.md) - Use hooks for React logic, plain functions for everything else\n- [`extract-ui-logic-utils.md`](rules/extract-ui-logic-utils.md) - Extract UI, logic, and utils when concerns diverge\n- [`extract-container-presentational.md`](rules/extract-container-presentational.md) - Extract container (data) from presentational (UI) components\n\n### Data & State\n- [`data-types-placement.md`](rules/data-types-placement.md) - Define types where the data is born\n- [`state-placement.md`](rules/state-placement.md) - Keep state local; lift only as high as needed\n\n## How to Use\n\nRead individual rule files for detailed explanations and code examples:\n\n```\nrules/start-small.md\nrules/extract-scrolling.md\nrules/organize-features-folder.md\n```\n\nEach rule file contains:\n- Brief explanation of why it matters\n- Examples showing the pattern\n- Guidance on when to apply it\n- Additional context and references\n\n**Core Principles:**\n1. Start with the overview above to understand the incremental approach\n2. Reference specific rule files when making architectural decisions\n3. Apply the smallest change that restores clarity\n4. Extract only when it improves readability or enables reuse\n\n## Full Compiled Document\n\nFor the complete guide with all rules expanded and optimized for AI agents: [`AGENTS.md`](AGENTS.md)\n\n## Detailed Rule Documentation\n\nSee individual rule files in [`rules/`](rules/) for in-depth explanations and code examples.\n","readmeExcerpt":"--- name: react-gradual-architecture description: Incremental React code organization guidelines. Start small, then extract when scanning and responsibilities start to blur. Use when creating features, organizing files, refactoring components, or deciding when to extract hooks, UI, or utils. license: MIT compatibility: Works with React. metadata: version: 1.0.0 author: vandriesh categories: [react, architecture, orga","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"rules/start-small.md\nrules/extract-scrolling.md\nrules/organize-features-folder.md"}],"parameters":{},"dependencies":[],"permissions":[],"extractedFiles":[],"languages":["typescript"],"docsSourceLabel":"GITHUB OPENCLEW","editorialOverview":"Incremental React code organization guidelines. Start small, then extract when scanning and responsibilities start to blur. Use when creating features, organizing files, refactoring components, or deciding when to extract hooks, UI, or utils. --- name: react-gradual-architecture description: Incremental React code organization guidelines. Start small, then extract when scanning and responsibilities start to blur. Use when creating features, organizing files, refactoring components, or deciding when to extract hooks, UI, or utils. license: MIT compatibility: Works with React. metadata: version: 1.0.0 author: vandriesh categories: [react, architecture, orga","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":400,"uniquenessScore":61,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-04-15T05:21:22.124Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-04-15T05:21:22.124Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-09T09:38:00.591Z","emptyReason":null},"items":[{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-10T18:48:31.762Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/github_openclew","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}