Daleui
DaleStudy/daleui
Use the daleui React design system with semantic Panda CSS tokens and accessible components.
Write or change React UI in apps/web, apps/gateway or packages/react-core — a component (not the route file that renders it), its user-facing strings, its Storybook story, or moving it into…
Install Odc Frontend
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-frontend -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-frontend --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/odc-frontend .claude/skills/odc-frontend && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "odc-frontend" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-frontend into .claude/skills/odc-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-frontend", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-frontendType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-frontend -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-frontend --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/odc-frontend .agents/skills/odc-frontend && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "odc-frontend" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-frontend into .agents/skills/odc-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-frontend", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-frontend -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-frontend --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/odc-frontend .cursor/skills/odc-frontend && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "odc-frontend" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-frontend into .cursor/skills/odc-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-frontend", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/DouglasNeuroInformatics/OpenDataCapture.git --path .agents/skills/odc-frontend--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-frontend -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-frontend --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/odc-frontend .gemini/skills/odc-frontend && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "odc-frontend" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-frontend into .gemini/skills/odc-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-frontend", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-frontendInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-frontend -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/odc-frontend .github/skills/odc-frontend && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "odc-frontend" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-frontend into .github/skills/odc-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-frontend", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-frontend -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install DouglasNeuroInformatics/OpenDataCapture odc-frontend --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DouglasNeuroInformatics/OpenDataCapture.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/odc-frontend .opencode/skills/odc-frontend && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "odc-frontend" agent skill from https://github.com/DouglasNeuroInformatics/OpenDataCapture/tree/main/.agents/skills/odc-frontend into .opencode/skills/odc-frontend/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "odc-frontend", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
odc-frontend- GitHub stars
- 119
- Token cost
- ~2.3k tokens
- SKILL.md length
- 908 words
- Files
- 2
- Skills in repo
- 16
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Write or change React UI in apps/web, apps/gateway or packages/react-core — a component (not the route file that renders it), its user-facing strings, its Storybook story, or moving it into…
- Tasks that involve React components
- SKILL.md covers Copy reaches the user through…, A keyed namespace resolves…, Instrument validation messages… and A story appears only if its…, plus 2 more sections
- Calls git
- Tasks that involve Linting and formatting
What it does
Odc Frontend is an agent skill from DouglasNeuroInformatics/OpenDataCapture. Write or change React UI in apps/web, apps/gateway or packages/react-core — a component (not the route file that renders it), its user-facing strings, its Storybook story, or moving it into react-core so a second frontend can use it. Use also when eslint reports jsx-no-literals, a required-field validation message renders in English, or a story never appears in Storybook. vercel-react-best-practices covers render performance; this covers the registries it never touches.
Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Frontend & Design, covering React components and Linting and formatting. It works with React, ESLint, Storybook and Vercel. The repository describes itself as: An electronic data capture platform for administering remote and in-person clinical instruments. The licence is Apache-2.0.
When your agent uses it
- Tasks that involve React components
- Tasks that involve Linting and formatting
Example prompts
- “/odc-frontend”
What it can do on your machine
Read from SKILL.md and the folder at commit 432dec8. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
git
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Odc Frontend loads about 2.3k tokens when it runs. Until then it costs about 122 tokens; SKILL.md has 908 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from DouglasNeuroInformatics/OpenDataCapture at commit 432dec8, republished under its Apache-2.0 licence (© DouglasNeuroInformatics). 908 words, ~2,292 tokens.
Download SKILL.mdSave it as
.claude/skills/odc-frontend/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- odc-frontend
- description
- Write or change React UI in apps/web, apps/gateway or packages/react-core — a component (not the route file that renders it), its user-facing strings, its Storybook story, or moving it into react-core so a second frontend can use it. Use also when eslint reports jsx-no-literals, a required-field validation message renders in English, or a story never appears in Storybook. vercel-react-best-practices covers render performance; this covers the registries it never touches.
packages/react-core has no build of its own — exports['.'] points at ./src/index.ts — so five
workspaces compile it themselves: apps/web (the clinician SPA), apps/gateway (server-rendered,
read by patients), apps/playground, packages/serve-instrument and storybook. They share
useTranslation and one component style. They do not share the machinery that checks either.
Two kinds of trap follow. eslint's frontend rules are scoped by file glob, so they do not run on
three of the five at all. And every shared resource — translation namespaces, zod error maps, story
directories, the react-core barrel — has a hand-maintained registry whose missing entry costs a
browser console line at most: eslint passes, and the story you wrote renders green in a Storybook
that never loads it. tsc catches exactly one registry, the declare module member that registers
a namespace in apps/web.
Copy reaches the user through t, and eslint sees only part of it
Root AGENTS.md requires every user-facing string to go through t. What follows is the part
eslint cannot enforce.
react/jsx-no-literals is an error on apps/web/src/**/*.tsx and
packages/react-core/src/**/*.tsx — and nowhere else (eslint.config.js). Three blind spots follow
from that configuration, and you are the only check standing in front of them:
- It reads JSX children, not attributes. The rule is configured
ignoreProps: true, soplaceholder,aria-label,titleand every other string prop lints clean while reading to a user exactly like copy. Pass those throughttoo. - It does not run on
apps/gateway,apps/playgroundorpackages/serve-instrument. Those three sit outside the eslint blocks carryingjsx-no-literals,import/no-default-exportand the bare-clsxban (apps/gateway/AGENTS.md) — and gateway is the app a patient reads. - Not everything it flags is copy. Stack-frame syntax and the like belong in a named constant
outside the JSX with a comment saying why — not in a
tcall, and not in theeslint.config.jsallowlist (apps/web/AGENTS.md).
Done when every string a user reads in your diff passes through t — attribute values and
apps/gateway files included, since nothing else will ask.
A keyed namespace resolves only where its program registered it
t('namespace.key') resolves against whatever the rendering program registered at startup, and
react-core code runs inside all five.
| Program | t('ns.key') | What decides it |
|---|---|---|
apps/web | Legal once the namespace is registered | The namespace registry is src/services/i18n.ts, and registering one is not a single edit (apps/web/AGENTS.md) |
apps/gateway, apps/playground, packages/serve-instrument | Renders nothing | All three call i18n.init({ translations: {} }), and libui's t() logs Failed to extract translation and returns '' — the patient sees a blank label, not a dotted key |
storybook | Renders correctly, proves nothing | Its preview imports apps/web/src/services/i18n for the side effect (storybook/AGENTS.md), so every story boots with web's resources — react-core's included, where at runtime they are not |
packages/react-core | Never — inline t({ en, fr }) | It compiles inside all five programs above, so a namespace apps/web registered is simply absent; host-owned copy arrives as a prop instead (packages/react-core/AGENTS.md) |
The one keyed family safe everywhere is libui's own registered namespace — t('libui.yes'),
t('libui.no') (packages/react-core/AGENTS.md).
Done when every keyed t('…') in your diff names a namespace registered by each program that
renders the component — read the diff for t(', since a green story proves nothing.
Show full SKILL.md (404 more words)Show less
Instrument validation messages have four registries, all in apps/web
apps/web/src/services/zod.ts is the only place a required-field message is localized, and it
configures four separate zod registries; a setErrorMap or z.config call anywhere else in the
SPA reaches one of them and leaves three on zod's English defaults. Open apps/web/AGENTS.md before
editing it — it names the four — and keep the new Function indirection hiding the runtime import
from Vite.
apps/gateway renders InstrumentRenderer and registers no error map at all, so a patient's
validation errors are zod's English defaults today. Localizing them is new work in gateway, not an
edit to web's zod.ts.
Done when every error-map configuration in your diff lives in apps/web/src/services/zod.ts and
covers all four instances — bundled v3, bundled v4, runtime v3, runtime v4.
A story appears only if its directory is scanned
The story registry is storybook/config/main.ts, which enumerates exactly three directories:
packages/react-core/src/components and apps/playground/src/components, plus all of
apps/web/src. A *.stories.tsx outside them never appears in the sidebar — no warning, no error
(storybook/AGENTS.md).
Done when each story you added sits under a scanned directory, or your reply states the component has none.
Working in packages/react-core
The barrel is the registry here: a folder under src/components/ publishes nothing until
export * from './components/X'; lands in src/index.ts, and there are no deep import paths to fall
back on (packages/react-core/AGENTS.md).
A component earns a place there when a second frontend renders it, so name the consumer file
before you move anything. The move has an order in which every skipped step still compiles:
.agents/docs/playbooks/promote-to-react-core.md. Open it before the first git mv.
Done when the file that renders it in the second frontend is named in your reply, the component
is exported from src/index.ts, and every data-testid it carried survived the move.
Where the conventions live
| Open | When |
|---|---|
apps/web/AGENTS.md | Anything in the SPA: layer folders, the Zustand store, data fetching, styling, data-testid selectors, registering a translation namespace, the unit-test environment |
packages/react-core/AGENTS.md | The components deliberately left off the barrel, and injecting host-specific behaviour as a prop |
apps/gateway/AGENTS.md | Writing anything gateway server-renders — its module-scope and RootProps serialization constraints |
apps/playground/AGENTS.md | UI in the instrument editor — its load-bearing top-level awaits and the example-catalog directory convention |
storybook/AGENTS.md | Writing a story, or running the one Storybook instance |
.agents/skills/odc-web-route/SKILL.md | The change is a page under src/routes, its loader, or the query hook it prefetches |
.agents/skills/odc-testing/SKILL.md | Placing the test — a gateway component test needs a // @vitest-environment happy-dom docblock, because the gateway project runs in node |
© DouglasNeuroInformatics, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in .agents/skills/odc-frontend of DouglasNeuroInformatics/OpenDataCapture.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit 432dec8
Compare with similar skills
Odc Frontend next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Odc Frontend this skillDouglasNeuroInformatics/OpenDataCapture | 119 | — | ~2.3k | Automated safety check: Pass | Apache-2.0 | |
| DaleuiDaleStudy/daleui | 119 | — | ~675 | Automated safety check: Pass | MIT | |
| React Render Types CompositionHorusGoul/eslint-plugin-react-render-types | 111 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Typescript Rulessoftspark/ai-toolkit | 179 | — | ~2.7k | Automated safety check: Notes | Apache-2.0 | |
| Vercel React Best Practicessanity-io/sanity | 6.4k | 129 repos | ~1.6k | Automated safety check: Pass | MIT | |
| Wonder BlocksKhan/wonder-blocks | 163 | — | ~3.2k | Automated safety check: Pass | MIT |
Similar skills
React Render Types Composition
HorusGoul/eslint-plugin-react-render-types
Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.
Typescript Rules
softspark/ai-toolkit
TypeScript/JavaScript coding rules: style, patterns, security, testing.
- Official
Vercel React Best Practices
sanity-io/sanity
React and Next.js performance optimization guidelines from Vercel Engineering.
Wonder Blocks
Khan/wonder-blocks
Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.
UX Semantics Audit
rome-os/rome
Audit an existing UI/UX design (React/JSX/TSX components, HTML, or generated app code) against a tiered ruleset of verifiable UX principles, and produce structured, evidence-cited findings that a…
More from DouglasNeuroInformatics/OpenDataCapture
All 16 skills in this repoOdc Agent Docs
DouglasNeuroInformatics/OpenDataCapture
Write or correct this repo's agent documentation — a workspace AGENTS.md (or its CLAUDE.md symlink), a playbook under .agents/docs/playbooks, an architecture doc, or the workspace map.
Odc Testing
DouglasNeuroInformatics/OpenDataCapture
Test a change in Open Data Capture. An agent skill from DouglasNeuroInformatics/OpenDataCapture.
Review PR
DouglasNeuroInformatics/OpenDataCapture
Triage pull requests against upstream main — one verdict, action items, and whether it needs the user's eyes.
Odc Open PR
DouglasNeuroInformatics/OpenDataCapture
Open a pull request against main for the current branch. An agent skill from DouglasNeuroInformatics/OpenDataCapture.
Opening Issues
DouglasNeuroInformatics/OpenDataCapture
File a GitHub issue for Open Data Capture with its labels. An agent skill from DouglasNeuroInformatics/OpenDataCapture.
Odc Debugging
DouglasNeuroInformatics/OpenDataCapture
What actually breaks in Open Data Capture — a failing build, lint, unit test or e2e run; a change with no visible effect; a suite that stays green after you broke the code on purpose; an error…
Related
Categories
Questions about Odc Frontend
What does Odc Frontend do?
Write or change React UI in apps/web, apps/gateway or packages/react-core — a component (not the route file that renders it), its user-facing strings, its Storybook story, or moving it into…. Odc Frontend is an agent skill from DouglasNeuroInformatics/OpenDataCapture. Write or change React UI in apps/web, apps/gateway or packages/react-core — a component (not the route file that renders it), its user-facing strings, its Storybook story, or moving it into react-core so a second frontend can use it.
When should I use Odc Frontend?
Odc Frontend fits situations like: tasks that involve React components; tasks that involve Linting and formatting.
How do I install Odc Frontend in Claude Code?
Run `npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-frontend -a claude-code`. Or copy the skill folder (.agents/skills/odc-frontend in DouglasNeuroInformatics/OpenDataCapture) into .claude/skills/odc-frontend in your project. Claude Code loads it when a task matches its description.
How do I install Odc Frontend in Codex?
Run `npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-frontend -a codex`. Or copy the skill folder (.agents/skills/odc-frontend in DouglasNeuroInformatics/OpenDataCapture) into .agents/skills/odc-frontend in your project. Codex loads it when a task matches its description.
Can I use Odc Frontend in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add DouglasNeuroInformatics/OpenDataCapture --skill odc-frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/odc-frontend, .gemini/skills/odc-frontend, .github/skills/odc-frontend and .opencode/skills/odc-frontend in your project.
What does Odc Frontend need to run?
Going by SKILL.md and its folder, Odc Frontend needs the command-line tools its instructions call (git).
Does Odc Frontend access the network?
SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Odc Frontend safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Odc Frontend use?
Odc Frontend is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Odc Frontend use?
About 2.3k tokens (SKILL.md is roughly 9.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Odc Frontend?
Skills that share tags, products or a category with Odc Frontend: Daleui (DaleStudy/daleui, 119 stars), React Render Types Composition (HorusGoul/eslint-plugin-react-render-types, 111 stars), Typescript Rules (softspark/ai-toolkit, 179 stars) and Vercel React Best Practices (sanity-io/sanity, 6.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Odc Frontend?
DouglasNeuroInformatics (a GitHub organization) maintains it in DouglasNeuroInformatics/OpenDataCapture, which has 119 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 7, 2026.
Source: DouglasNeuroInformatics/OpenDataCapture on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.