chi-recommendations — chi-recommendations installation for Angular chi-recommendations, community, chi-recommendations installation for Angular, ide skills, chi-recommendations framework support, chi-recommendations decision tree, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing optimized framework integrations with Vue 3, React, and Angular. chi-recommendations is a skill that offers implementation recommendations for various frameworks, including Vue 3, React, and Angular, to help developers make informed decisions.

Features

Provides a decision tree for framework-specific implementation recommendations
Supports Vue 3 with chi-vue for full reactivity and composition API
Offers Custom Elements approach for React and Angular frameworks
Utilizes ref callbacks for event listeners in React due to synthetic event limitations
Enables TypeScript support for Vue 3 implementations
Works with popular frameworks like React and Angular using Custom Elements

# Core Topics

chi-recommendations installation for Angular chi-recommendations framework support chi-recommendations decision tree
CenturyLink CenturyLink
[0]
[0]
Updated: 3/8/2026

Agent Capability Analysis

The chi-recommendations skill by CenturyLink is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for chi-recommendations installation for Angular, chi-recommendations framework support, chi-recommendations decision tree.

Ideal Agent Persona

Perfect for Frontend Agents needing optimized framework integrations with Vue 3, React, and Angular.

Core Value

Empowers agents to choose the best implementation approach using a decision tree, supporting Custom Elements and chi-vue for seamless framework integration with TypeScript support and Vue reactivity.

↓ Capabilities Granted for chi-recommendations

Implementing chi-vue for Vue 3 projects
Integrating Custom Elements with React applications
Optimizing Angular projects with Custom Elements

! Prerequisites & Limits

  • Limited to Vue 3, React, and Angular frameworks
  • Requires understanding of framework-specific implementation details
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

chi-recommendations

Install chi-recommendations, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Chi Implementation Recommendations

Decision Tree

Use this decision tree to recommend the best approach:

Step 1: Check Framework

FrameworkRecommended ApproachReasoning
Vue 3chi-vueFull Vue reactivity, composition API, TypeScript support
ReactCustom ElementsWorks with React; note: use ref callbacks for event listeners since React synthetic events don't fire on CEs
AngularCustom ElementsExcellent support via CUSTOM_ELEMENTS_SCHEMA in module declarations
SvelteCustom ElementsSeamless Custom Elements support
Vanilla JSCustom ElementsBest DX, no framework overhead
UnknownCustom ElementsSafe default for any framework

Step 2: Check Constraints

ConstraintOverride ToReasoning
Legacy browser support (IE11)HTML/CSSCustom Elements need polyfills
User explicitly wants CSSHTML/CSSRespect explicit preference
User wants Web ComponentsCustom ElementsRespect explicit preference
Static HTML site (no JS)HTML/CSSNo JS runtime needed
SSR without hydrationHTML/CSSCustom Elements need JS to initialize

Step 3: Determine Confidence

ScenarioConfidence
Framework detected + no conflictsHigh
Existing code matches recommendationHigh
No framework info, using defaultLow
Existing code uses different approachMedium (suggest gradual migration)

Code Examples

Vue Approach

html
1<script setup>
2import { ChiButton } from '@aspect/chi-vue';
3</script>
4<template>
5  <ChiButton color="primary" size="lg" @click="handleClick">Click me</ChiButton>
6</template>

Custom Elements Approach

html
1<chi-button color="primary" size="lg">Click me</chi-button>
2<script>
3  document.querySelector('chi-button').addEventListener('chiClick', handleClick);
4</script>

HTML/CSS Approach

html
1<button class="chi-button -primary -lg" type="button" onclick="handleClick()">Click me</button>

Note: Requires manual event handling, ARIA attributes, and keyboard support.

Approach Detection

To detect which approach existing code uses:

PatternApproach
<Chi[A-Z] (PascalCase tags)Vue
<chi- (kebab-case custom elements)Custom Elements
class="chi- (CSS classes on native elements)HTML/CSS

Count occurrences of each pattern. The most frequent one is the existing approach.

Edge case: <chi-icon> inside a <button class="chi-button"> is mixed usage -- recommend migrating the button to <chi-button> too.

Migration Paths

HTML/CSS → Custom Elements

  1. Replace CSS base classes with Web Component tags: <button class="chi-button"> → <chi-button>
  2. Convert CSS modifiers to properties: -primary → color="primary"
  3. Convert boolean modifiers to attributes: -disabled → disabled
  4. Keep utility classes for spacing: class="-p--4" stays
  5. Remove manual ARIA -- Web Components handle it automatically

HTML/CSS → Vue

  1. Install @aspect/chi-vue package
  2. Import components: import { ChiButton } from '@aspect/chi-vue'
  3. Replace HTML with Vue component syntax
  4. Use v-bind for dynamic props, v-on for events

Custom Elements → Vue

  1. Replace <chi-*> tags with <Chi*> components
  2. Convert attributes to Vue props syntax
  3. Migrate events from addEventListener to v-on

Vue → Custom Elements

  1. Replace <Chi*> with <chi-*> Web Components
  2. Convert Vue props to attributes
  3. Replace v-on events with addEventListener
  4. Handle reactivity manually if needed

Priority Order

  1. chi-vue (priority 1) -- Vue 3 components for Vue projects
  2. chi-web-components (priority 2) -- Custom Elements for any framework
  3. chi-html-css (priority 3) -- CSS classes for static HTML or legacy support

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is chi-recommendations?

Perfect for Frontend Agents needing optimized framework integrations with Vue 3, React, and Angular. chi-recommendations is a skill that offers implementation recommendations for various frameworks, including Vue 3, React, and Angular, to help developers make informed decisions.

How do I install chi-recommendations?

Run the command: npx killer-skills add CenturyLink/Chi. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for chi-recommendations?

Key use cases include: Implementing chi-vue for Vue 3 projects, Integrating Custom Elements with React applications, Optimizing Angular projects with Custom Elements.

Which IDEs are compatible with chi-recommendations?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for chi-recommendations?

Limited to Vue 3, React, and Angular frameworks. Requires understanding of framework-specific implementation details.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add CenturyLink/Chi. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use chi-recommendations immediately in the current project.

Related Skills

Looking for an alternative to chi-recommendations or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI