一键导入
frontend-development
Build enterprise-grade React applications with IBM Carbon Design System, including reusable components and responsive design patterns
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Build enterprise-grade React applications with IBM Carbon Design System, including reusable components and responsive design patterns
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use this skill to learn hot to use the IBM Cloud CLI (`ibmcloud`) commands, flags, command patterns, or troubleshooting guidance. Covers core CLI workflows: install/verify/update, login with SSO or API keys, select account/region/resource group targets, inspect and configure CLI output, manage plug-ins (e.g. `vpc-infrastructure` / `ibmcloud is ...` for VPC infrastructure.).
Build voice-enabled agents in watsonx Orchestrate using the ADK. This guide covers initial setup, key concepts for building your first voice agent.
Reusable skills for the Turbonomic Resource Dashboard project. Each skill is a specialized workflow that Bob can activate to help with specific development tasks.
Deploy and manage HashiCorp Vault using Ansible automation with proper configuration, permissions, and security setup.
Plan and run evaluations, red-teaming, and runtime observability for watsonx Orchestrate (WXO) agents across Developer Edition and SaaS. Use when validating WXO agents pre-deploy, authoring benchmark JSON DAGs, interpreting Journey Success / Tool Call Recall / Agent Routing F1 / RAG Faithfulness, diagnosing agent failures, running adversarial red-teaming (Instruction Override, Jailbreaking, Crescendo Attack), searching runtime traces, exporting traces via the Python SDK, wiring Langfuse for cost & latency analysis, or registering model pricing in Langfuse. Interview-first; emits bash commands for the user to run in their IDE terminal.
Evaluate GenAI applications — RAG pipelines, LLM/chatbot outputs, and AI agents with tool-calling — before deployment using IBM watsonx.governance metrics. Use when scoring RAG faithfulness / answer relevance / context relevance / retrieval precision, screening LLM outputs for HAP / PII / social bias / jailbreak / prompt safety risk, evaluating agentic tool-call accuracy / parameter accuracy / relevance / syntactic validity, authoring custom LLM-as-judge metrics (criteria_judge or prompt_template styles) for domain-specific concerns, preparing eval datasets in the watsonx-gov SDK format, interpreting results against pass/fail thresholds, or producing prioritized [CRITICAL]/[WARNING]/[INFO] recommendations. Partners install `ibm-watsonx-gov[metrics,agentic,tools,llmaj]` directly and call the SDK in-process; no MCP server, no hosted dependency.
| name | frontend-development |
| description | Build enterprise-grade React applications with IBM Carbon Design System, including reusable components and responsive design patterns |
Build React applications with IBM Carbon Design System:
Setup React project with Carbon dependencies (@carbon/react, @carbon/icons-react) Configure Carbon theme in SCSS (g100 dark theme recommended) **CRITICAL**: Wrap app with Theme component: `` - SCSS alone is insufficient Use ProductionShell template from `components/ProductionShellTemplate.jsx` for navigation Build components using Carbon components (never create custom versions) Apply responsive design with Carbon Grid system (lg, md, sm breakpoints) Use shared styles from `styles/SharedStyles.scss` for consistency Implement proper state management and API integration patterns Ensure accessibility with ARIA labels and keyboard navigation Test across breakpoints and build for productionKey Resources:
carbon-design-guide.md - Quick reference for Carbon componentscomponents/ProductionShellTemplate.jsx - Enterprise shell with header, side nav, breadcrumbsstyles/SharedStyles.scss - Reusable styles, utilities, animationsEssential Patterns:
<Theme theme="g100"><App /></Theme><Grid fullWidth><Column lg={16}>var(--cds-text-primary), $spacing-05<Loading description="Loading..." /><InlineNotification kind="error" />Common Issues:
<Theme theme="g100"> around app.cds--header__menu-toggle { display: flex !important; }onClickSideNavExpand to navigation handlers (see app-capabilities.md)Application Reference:
See app-capabilities.md for complete feature list, navigation structure, and recent implementations including the menu auto-close fix.