[AI-skills]: Claude Sonnet 4.6 adds navigational tab component with tab-body in React

[wnvko]

Description

AI agent added IgrTabs as navigational component to the view correctly. However, it added and tab-body which is not necessary and fill the entire view.

Steps to reproduce

Add skills to a react application in the .github/skills folder. Ask Claude Sonnet 4.6 to do this:
In my application I have navigation in master view to each child component. I would like to have some more sofistcated component for this navigation, for example tabs. I also need to have visual indication when navigation completes to know on which tab I am now. Implement this for me.

Result

IgrTabs component is generated with its tab-body which is not needed when tabs is used for navigation.

Expected result

Only tabs should be visible on the main layout and routing outlet should fill the rest of the page.

Attachments

This is the result. There is tab-body which takes most of the page. In the end the router outlet is less than 30px.

[damyanpetev]

@wnvko Please pose the actual generated code, that tab-body is in the component's Shadow DOM, so it's not part of the generated or user code. I see only <igc-tab and <span slot="label" in the light DOM from the screenshot which is correct.

If so, that's exactly the same as IgniteUI/igniteui-webcomponents#2011 so the full repro app with context and styling would be nice and we should see if that issue needs to be revived since I'm not entirely sure from the issue discussion that was indeed an app issue.

[wnvko]

@damyanpetev
Here is the sample. It is also including the .git folder so you can switch back to initial application and to see what AI started with.

react.zip

[damyanpetev]

@damyanpetev Here is the sample. It is also including the .git folder so you can switch back to initial application and to see what AI started with.

react.zip

Again, confirming my previous post, cuz the view contains:

<IgrTab
  selected={activeTab === 'tab-first'}
  onClick={() => navigate(`/child-view/from%20papa`)}
>
  <span slot="label">To First</span>
</IgrTab>

Which is correct... right? In which case it's a styling issue, possibly the same as linked above

[wnvko]

So this is a documentations issue. I do not see now such sample in react and it will be great if one can be added. In the sample the style issue should be fixed and hopefully AI could follow this.

[damyanpetev]

Setting height: fit-content; on the tabs does the trick, but that's not general guidance and/or not sure it's the best solution.

The one given in the previous issue was to either drop the height of the view (not a valid option) or use grid-template-rows: auto 1fr - which is better, but again that's not a given or something the tabs component can control in context. Possibly, flex-grow restriction would do much the same for a flex layouts

[wnvko]

I know this could be solved manually. The question here is how to ensure AI will generate the application with navigation in tabs and the output will be acceptable. This is why the issue was logged. Right now the output is not good.