Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add ww-w-ai/bkit-claude-code --skill phase-6-ui-integrationgit clone --depth 1 https://github.com/ww-w-ai/bkit-claude-codeWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/ww-w-ai/bkit-claude-code/phase-6-ui-integration)<a href="https://agentmods.dev/skills/ww-w-ai/bkit-claude-code/phase-6-ui-integration"><img src="https://agentmods.dev/badge/skills/ww-w-ai/bkit-claude-code/phase-6-ui-integration/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/ww-w-ai/bkit-claude-code/phase-6-ui-integration"><img src="https://agentmods.dev/badge/skills/ww-w-ai/bkit-claude-code/phase-6-ui-integration.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00051 | $0.04083 |
| Opus 5 | $0.00026 | $0.02041 |
| Sonnet 5 | $0.00010 | $0.00817 |
| Haiku 4.5 | $0.00005 | $0.00408 |
Grade A, and why
phase-6-ui-integration scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
const response = await fetch(url.toString(), { How it starts
The opening of the file, as written. The whole thing — 704 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Phase 6: UI Implementation + API Integration
Actual UI implementation and API integration
Purpose
Implement actual screens using design system components and integrate with APIs.
What to Do in This Phase
- Page Implementation: Develop each screen
- State Management: Handle client state
- API Integration: Call backend APIs
- Error Handling: Handle loading and error states
Deliverables
src/
├── pages/ # Page components
│ ├── index.tsx
│ ├── login.tsx
│ └── ...
├── features/ # Feature-specific components
│ ├── auth/
│ ├── product/
│ └── ...
└── hooks/ # API call hooks
├── useAuth.ts
└── useProducts.ts
docs/03-analysis/
└── ui-qa.md # QA results
PDCA Application
- Plan: Define screens/features to implement
- Design: Component structure, state management design
- Do: UI implementation + API integration
- Check: Zero Script QA
- Act: Fix bugs and proceed to Phase 7
Level-wise Application
| Level | Application Method |
|---|---|
| Starter | Static UI only (no API integration) |
| Dynamic | Full integration |
| Enterprise | Full integration + optimization |
API Client Architecture
Why is a Centralized API Client Needed?
| Problem (Scattered API Calls) | Solution (Centralized Client) |
|---|---|
| Duplicate error handling logic | Common error handler |
| Distributed auth token handling | Automatic token injection |
| Inconsistent response formats | Standardized response types |
| Multiple changes when endpoint changes | Single point of management |
| Difficult testing/mocking | Easy mock replacement |
3-Layer API Client Structure
┌─────────────────────────────────────────────────────────┐
│ UI Components │
│ (pages, features, hooks) │
├─────────────────────────────────────────────────────────┤
│ Service Layer │
│ (Domain-specific API call functions) │
│ authService, productService, orderService, ... │
├─────────────────────────────────────────────────────────┤
│ API Client Layer │
│ (Common settings, interceptors, error handling) │
│ apiClient (axios/fetch wrapper) │
└─────────────────────────────────────────────────────────┘
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago First seen · 704 lines · 51 tokens per session scan A cdbcea3ebe5f
phase-6-ui-integration is a skill published in the GitHub repository ww-w-ai/bkit-claude-code (595 stars, last pushed 2d ago), licensed Apache-2.0. It adds 51 tokens to every session and 4,083 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
copilotkit-upgrade
Use when migrating a CopilotKit v1 application to v2 -- updating package imports, replacing deprecated hooks and components, switching from GraphQL runtime to AG-UI protocol runtime, and resolving breaking API changes.
nextjs-pages-router
Set up tRPC in Next.js Pages Router with createNextApiHandler, createTRPCNext, withTRPC HOC, SSR via ssr option and ssrPrepass, SSG via createServerSideHelpers with getStaticProps, and server-side helpers for getServerSideProps prefetching.
service-digital-engagement-channel-configure
Configures and deploys enhanced chat Messaging Channels for Messaging for In-App and Web (MIAW). Use when the user needs to create, deploy, and activate a messaging channel configured with Omni-Channel Flow, Omni-Channel Queue, User, or Agentforce Service Agent routing. Generates MessagingChannel metadata, deploys it…
om-system-extension
Extend installed Open Mercato modules through UMES enrichers, interceptors, mutation guards, widgets, menus, entity extensions, events, component/page replacements, and overrides. Use for "extend core", "add field/column/action", "hide page", "intercept API", "UMES", or "rozszerz moduł".
cloudbase-sites
Use when the user wants to vibe-code a full-stack web app inside DeepSeek Harness — scaffold from CloudBase templates, local Vite preview, PostgreSQL tables, and one-click static hosting deploy with a real domain.
fullstack-dev
Full-stack backend architecture and frontend-backend integration guide. TRIGGER when: building a full-stack app, creating REST API with frontend, scaffolding backend service, building todo app, building CRUD app, building real-time app, building chat app, Express + React, Next.js API, Node.js backend, Python backend…